アポリスト作成ツール

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>アポリスト作成ツール</title>
	<style>
		h1 {
			text-align: center;
			font-size: 2rem;
		}

		form {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 2rem auto;
			width: 80%;
			max-width: 500px;
			position: relative;
			padding: 1rem;
			box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
			background-color: #f8f8f8;
		}

		label {
			font-size: 1.2rem;
			margin-bottom: 0.5rem;
		}

		input[type="text"] {
			width: 100%;
			padding: 0.5rem;
			margin-bottom: 1rem;
			border: none;
			border-radius: 0.25rem;
			background-color: #f2f2f2;
			color: #333;
			font-size: 1rem;
		}

		input[type="submit"] {
			padding: 0.5rem;
			background-color: #333;
			color: #fff;
			border: none;
			border-radius: 0.25rem;
			cursor: pointer;
			font-size: 1rem;
			width: 100%;
			max-width: 200px;
			margin: 0 auto;
			transition: all 0.2s ease-in-out;
		}

		input[type="submit"]:hover {
			background-color: #f8f8f8;
			color: #333;
		}

		.result {
			font-size: 1.2rem;
			text-align: center;
			margin-top: 2rem;
			display: none;
		}

		.result:before {
			content: "📋";
			display: inline-block;
			margin-right: 0.5rem;
		}

		.joke {
			position: fixed;
			bottom: 0;
			left: 0;
			font-size: 1rem;
			color: #333;
			padding: 0.5rem;
			background-color: #f8f8f8;
			border-top: 1px solid #ccc;
			width: 100%;
			text-align: center;
			font-style: italic;
			opacity: 0.8;
		}
	</style>
  </head>
  <body>
    <h1>アポリスト作成ツール</h1>

    <form id="form" onsubmit="return handleSubmit(event)">
      <label for="keyword">キーワードを入力してください：</label>
      <input type="text" id="keyword" placeholder="例：Web開発" required />
      <input type="submit" value="アポリストを作成" />
    </form>

    <div class="result" id="result"></div>

    <div class="joke">
      <p>『進撃の巨人』をアポリストにしたいんだけど、どうすればいいの？</p>
      <p>→ 「エレン・イェーガー」でしょ！</p>
    </div>

	<script>
		function handleSubmit(event) {
			event.preventDefault();

			const keyword = document.getElementById("keyword").value.trim();

			if (keyword != "") {
				const title = `「${keyword}」を含むアポリスト`;
				const description = `以下は「${keyword}」を含むアポリストです。\n\n`;

				const list = [
					"Web開発の資料集",
					"デザイン理論のまとめ",
					"「JavaScript」の書籍一覧",
					"Pythonフレームワークの比較表",
					"ゲームデザインに関する動画まとめ",
				];

				let result = "";

				list.forEach((item) => {
					if (item.includes(keyword)) {
						result += `・${item}\n`;
					}
				});

				if (result != "") {
					document.getElementById("result").innerHTML = `
						<h2>${title}</h2>
						<p>${description}${result}</p>
					`;
				} else {
					document.getElementById("result").innerHTML = `
						<p>該当するアポリストは見つかりませんでした。</p>
					`;
				}

				document.getElementById("result").style.display = "block";
			} else {
				document.getElementById("keyword").focus();
			}
		}
	</script>
  </body>
</html>