<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絵文字翻訳アプリ</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding-top: 50px;
text-align: center;
}
h1 {
font-size: 2em;
margin: 0;
}
form {
margin-top: 20px;
}
input[type="text"] {
font-size: 1.5em;
padding: 5px;
width: 300px;
}
input[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
cursor: pointer;
font-size: 1.5em;
padding: 10px;
margin-left: 10px;
}
.result {
margin-top: 50px;
font-size: 2em;
}
.error {
color: red;
margin-top: 20px;
}
</style>
<script>
function translate() {
let input = document.getElementById("input").value;
let output = "";
// 以下、絵文字の翻訳プログラム（適宜変更）
if (input.toLowerCase().includes("hello")) {
output = "👋 Hello there!";
} else if (input.toLowerCase().includes("goodbye")) {
output = "👋 Goodbye!";
} else if (input.toLowerCase().includes("thanks")) {
output = "🙏 Thank you!";
} else if (input.toLowerCase().includes("love")) {
output = "❤️ Love is in the air!";
} else {
output = "I don't understand what you're saying 🤔";
}
document.getElementById("result").innerHTML = output;
}
</script>
</head>
<body>
<h1>絵文字翻訳アプリ</h1>
<form>
<input type="text" id="input" placeholder="翻訳したい文章を入力してください">
<input type="button" value="翻訳" onclick="translate()">
</form>
<div id="result"></div>
</body>
</html>
