<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>創作アイディア生成サイト</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--background-color, #f4f6f9);
}
.container {
max-width: 800px;
width: 90%;
padding: 20px;
text-align: center;
background-color: var(--chat-bg-color, #ffffff);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
margin-top: 20px;
}
.title {
font-size: 24px;
margin-bottom: 15px;
}
.theme-toggle-btn {
position: absolute;
right: 15px;
top: 15px;
padding: 5px 10px;
cursor: pointer;
border: none;
background-color: #0078d7;
color: #ffffff;
border-radius: 5px;
}
.dropdown, .input, .button {
width: 80%;
margin: 5px;
padding: 10px;
font-size: 16px;
}
.idea-display {
margin-top: 20px;
font-size: 18px;
padding: 15px;
color: #333;
background-color: #f4f4f4;
border-radius: 10px;
text-align: left;
}
.related-ideas {
font-size: 14px;
color: #555;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">創作アイディア生成サイト</h1>
<button class="theme-toggle-btn" onclick="toggleTheme()">🌙 ダークモード</button>
<label for="categorySelect">カテゴリを選択</label>
<select id="categorySelect" class="dropdown">
<option value="fantasy">ファンタジー</option>
<option value="sci-fi">SF</option>
<option value="mystery">ミステリー</option>
<option value="horror">ホラー</option>
</select>
<BR>
<label for="elementSelect">詳細要素を選択</label>
<select id="elementSelect" class="dropdown">
<option value="character">キャラクター</option>
<option value="plot">プロット</option>
<option value="setting">舞台設定</option>
<option value="theme">テーマ</option>
</select>
<button class="button" onclick="generateIdea()">アイディア生成</button>
<div class="idea-display" id="ideaDisplay">ここに生成されたアイディアが表示されます。</div>
<div class="related-ideas" id="relatedIdeas"></div>
</div>
<script>
const ideas = {
"fantasy": {
"character": ["勇敢な騎士", "神秘的な魔法使い", "不思議な生物"],
"plot": ["王国を救うための冒険", "魔法の秘宝を巡る争い", "禁断の魔法を探求する旅"],
"setting": ["ドラゴンが住む山", "不思議な森", "海底の王国"],
"theme": ["友情と勇気", "運命と戦い", "魔法と現実の対立"]
},
"sci-fi": {
"character": ["宇宙飛行士", "AIロボット", "サイボーグ"],
"plot": ["異星人との接触", "未来都市の陰謀", "宇宙戦争"],
"setting": ["宇宙ステーション", "荒廃した地球", "人工惑星"],
"theme": ["人間と機械の共存", "進化の危機", "文明の崩壊と再生"]
}
};
const relatedIdeas = {
"友情と勇気": ["戦場での友情", "共に戦う友人の絆"],
"運命と戦い": ["運命に抗うヒーロー", "過去を背負う主人公の決意"]
};
let isDarkMode = false;
function toggleTheme() {
isDarkMode = !isDarkMode;
document.body.style.setProperty("--background-color", isDarkMode ? "#333" : "#f4f6f9");
document.body.style.setProperty("--chat-bg-color", isDarkMode ? "#444" : "#ffffff");
document.querySelector(".theme-toggle-btn").textContent = isDarkMode ? "🌞 ライトモード" : "🌙 ダークモード";
}
function generateIdea() {
const category = document.getElementById("categorySelect").value;
const element = document.getElementById("elementSelect").value;
const ideaArray = ideas[category][element];
const randomIdea = ideaArray[Math.floor(Math.random() * ideaArray.length)];
document.getElementById("ideaDisplay").textContent = randomIdea;
displayRelatedIdeas(randomIdea);
}
function displayRelatedIdeas(idea) {
const relatedDiv = document.getElementById("relatedIdeas");
relatedDiv.innerHTML = "<h4>関連するアイディア:</h4>";
const relatedItems = relatedIdeas[idea] || ["関連アイディアが見つかりません"];
relatedItems.forEach(item => {
const relatedItemDiv = document.createElement("div");
relatedItemDiv.textContent = `- ${item}`;
relatedDiv.appendChild(relatedItemDiv);
});
}
</script>
</body>
</html>
