人生相談アプリ

人生に迷っていること、愚痴をこぼしてください。以下のフォームに入力して「アドバイスをもらう」ボタンをクリックしてください。
以下が実際のプログラムです。


<!DOCTYPE html>
<html>
<head>
	<title>人生相談アプリ</title>
	<style>
		body {
			background-color: #f5f5f5;
			font-family: Arial, sans-serif;
			color: #333;
		}

		.container {
			margin: 0 auto;
			max-width: 800px;
			padding: 30px;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
			text-align: center;
		}

		h1 {
			margin-top: 0;
			font-weight: bold;
			font-size: 36px;
		}

		p {
			font-size: 20px;
			margin-top: 30px;
			margin-bottom: 0;
			text-align: left;
			line-height: 1.5;
		}

		textarea {
			display: block;
			margin: 20px auto;
			width: 80%;
			min-height: 150px;
			font-size: 18px;
			padding: 10px;
			border-radius: 5px;
			border: 2px solid #ccc;
			resize: none;
		}

		button {
			background-color: #4CAF50;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			font-size: 18px;
			cursor: pointer;
		}

		button:hover {
			background-color: #3e8e41;
		}

		#response {
			margin-top: 20px;
			font-size: 24px;
			text-align: left;
			border-radius: 5px;
			padding: 10px;
			background-color: #e5ffe5;
			border: 1px solid #4CAF50;
			display: none;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>人生相談アプリ</h1>
		<p>人生に迷っていること、愚痴をこぼしてください。以下のフォームに入力して「アドバイスをもらう」ボタンをクリックしてください。</p>
		<textarea id="input" placeholder="ここに愚痴や相談内容を入力してください"></textarea>
		<button onclick="getAdvice()">アドバイスをもらう</button>
		<div id="response"></div>
	</div>

	<script>
		function getAdvice() {
			// 入力された文字列を取得
			var inputText = document.getElementById("input").value;

			// ユーザーが何も入力しなかった場合はメッセージを表示
			if (inputText.trim() == "") {
				alert("愚痴や相談内容を入力してください");
				return;
			}

			// サーバーにデータを送信してアドバイスを取得
			// 今回はダミーデータを使用する
			var adviceList = [
				"不思議なことに、人生は最初にやることができるすべてのことというわけではありません。",
				"世界を変えることは容易ではありませんが、自分自身を変えることはできます。",
				"笑いは最良の薬です。いい笑いを見て、ストレスを解消してください。",
				"どんな時にも希望を持ってください。希望はあなたを常に導き、成功に導く力になります。",
				"あきらめずに、一歩ずつ進んでください。あなたはもう勇敢な人です。",
				"失敗は成功への第一歩です。あなたが今まで達成してきたことを考えてください。",
				"もし歩くのが難しい場合、走ってみてください。あなたはまだ新しい未来を手にすることができます。",
				"どんなに長い道でも、最初の一歩から始めてください。次は次の一歩から始めてください。次の一歩を踏み出せば、新しい人生が始まります。"
			];

			var randomIndex = Math.floor(Math.random() * adviceList.length);
			var advice = adviceList[randomIndex];

			// アドバイスを表示
			var responseElement = document.getElementById("response");
			responseElement.innerHTML = "<p>アドバイス：</p><p>" + advice + "</p>";
			responseElement.style.display = "block";

			// 入力フォームをリセット
			document.getElementById("input").value = "";
		}
	</script>
</body>
</html>

ジョーク：

「人生相談アプリですが、うちの開発者の人生相談は一声も乗りません。」