🚀✨トレンド変換アプリ🌈🎉
🌟 ここに結果が表示されます 🌟
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>✨トレンド変換アプリ🌟</title>
<style>
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes burst {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}
</style>
</head>
<body>
<div style="width:400px; height:400px; margin:auto; border:2px solid #FFD700; border-radius:15px; padding:20px; box-sizing:border-box; background: linear-gradient(135deg, #FFDEE9 0%, #B5FFFC 100%); position:relative; overflow:hidden;">
<h1 style="text-align:center; font-size:24px; margin-bottom:20px;">🚀✨トレンド変換アプリ🌈🎉</h1>
<input type="text" id="trendInput" placeholder="トレンドワードを入力🔍" style="width:100%; padding:10px; font-size:16px; border:2px solid #FF69B4; border-radius:8px; margin-bottom:10px;">
<div style="text-align:center; margin-bottom:15px;">
<button onclick="convertTrend('ハロウィン')" style="padding:10px 15px; font-size:14px; margin:5px; cursor:pointer; border:none; border-radius:8px; background-color:#FFA07A; color:white; animation: rotate 4s linear infinite;">🎃ハロウィン</button>
<button onclick="convertTrend('桜')" style="padding:10px 15px; font-size:14px; margin:5px; cursor:pointer; border:none; border-radius:8px; background-color:#FFB6C1; color:white; animation: rotate 6s linear infinite;">🌸桜</button>
<button onclick="convertTrend('オリンピック')" style="padding:10px 15px; font-size:14px; margin:5px; cursor:pointer; border:none; border-radius:8px; background-color:#87CEFA; color:white; animation: rotate 5s linear infinite;">🏅オリンピック</button>
</div>
<div id="result" style="text-align:center; font-size:16px; min-height:60px; padding:10px; border:2px dashed #20B2AA; border-radius:8px; background-color:#E0FFFF; position:relative;">
🌟 ここに結果が表示されます 🌟
</div>
<button onclick="speak()" style="display:block; margin:20px auto 0; padding:10px 20px; font-size:16px; cursor:pointer; border:none; border-radius:8px; background-color:#32CD32; color:white; box-shadow: 0 4px #2E8B57;">🔊 読み上げる 🎤</button>
<div id="burst" style="position:absolute; width:100px; height:100px; top:50%; left:50%; transform: translate(-50%, -50%); pointer-events:none;"></div>
</div>
<script>
const trends = {
"ハロウィン": {
English: "Halloween",
sentence: "Halloween is celebrated on October 31st with costumes and candy! 🎃👻"
},
"桜": {
English: "Cherry Blossom",
sentence: "The cherry blossoms are blooming beautifully this spring. 🌸🌼"
},
"オリンピック": {
English: "Olympics",
sentence: "The Olympics bring together athletes from around the world. 🏅🌍"
}
};
function convertTrend(word) {
const result = trends[word];
const resultDiv = document.getElementById('result');
const burstDiv = document.getElementById('burst');
if(result){
resultDiv.innerHTML = `✨<strong>${result.English}</strong>✨<br>${result.sentence}`;
createBurst();
} else {
resultDiv.innerHTML = "❗該当するトレンドワードがありません。❗";
}
}
function speak(){
const text = document.getElementById('result').innerText;
if(text !== "🌟 ここに結果が表示されます 🌟"){
const utter = new SpeechSynthesisUtterance(text);
utter.lang = 'en-US';
speechSynthesis.speak(utter);
}
}
document.getElementById('trendInput').addEventListener('keypress', function(e){
if(e.key === 'Enter'){
convertTrend(this.value.trim());
this.value = '';
}
});
function createBurst(){
const burstDiv = document.getElementById('burst');
const emoji = "🎉✨💥🌟";
burstDiv.innerHTML = '';
for(let i=0; i<20; i++){
const span = document.createElement('span');
span.textContent = emoji[Math.floor(Math.random() * emoji.length)];
span.style.position = 'absolute';
span.style.left = '50%';
span.style.top = '50%';
span.style.fontSize = '20px';
span.style.animation = `burst ${1 + Math.random()}s forwards`;
span.style.transform = `translate(${Math.random()*100 - 50}px, ${Math.random()*100 - 50}px)`;
burstDiv.appendChild(span);
}
setTimeout(() => { burstDiv.innerHTML = ''; }, 1500);
}
</script>
</body>
</html>
```