🔮 今日の運勢占い 🐾
5つの質問に答えて、あなたの今日の動物運勢をチェックしましょう！ 🐶🐱🦁🐸🐬
🦁
あなたはライオンのように力強く、自信に満ちています。
今日は大胆に挑戦してみましょう！✨
ラッキーアイテム: 🔑 キー
```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.bounce {
animation: bounce 0.5s;
}
.fadeIn {
animation: fadeIn 1s;
}
.rotate {
animation: rotate 2s linear infinite;
}
</style>
</head>
<body>
<div id="app" style="width: 100%; max-width: 400px; height: 100vh; max-height: 400px; margin: auto; padding: 20px; box-sizing: border-box; font-family: Arial, sans-serif; text-align: center; background: linear-gradient(135deg, #f9f9f9, #e0f7fa); border: 2px solid #4dd0e1; border-radius: 10px; position: relative;">
<div id="welcome" style="animation: fadeIn 1s;">
<h1 style="font-size: 2em;">🔮 今日の運勢占い 🐾</h1>
<p style="font-size: 1em;">5つの質問に答えて、あなたの今日の動物運勢をチェックしましょう！ 🐶🐱🦁🐸🐬</p>
<button id="startBtn" style="padding: 10px 20px; font-size: 1em; cursor: pointer; border: none; border-radius: 5px; background-color: #4dd0e1; color: white; margin-top: 20px;">はじめる 🚀</button>
</div>
<div id="questions" style="display: none; animation: fadeIn 1s;">
<form id="quizForm">
<div class="question" style="margin-bottom: 15px;">
<p style="font-size: 1em;">1️⃣ 今日の気分は？ 😊😐😔</p>
<button type="button" class="option" data-value="1" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #ffab00; color: white;">😄 元気いっぱい</button>
<button type="button" class="option" data-value="2" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #ffab00; color: white;">😐 普通</button>
<button type="button" class="option" data-value="3" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #ffab00; color: white;">😔 少し落ち込む</button>
</div>
<div class="question" style="margin-bottom: 15px;">
<p style="font-size: 1em;">2️⃣ 今日の予定は？ 📅🎉📚</p>
<button type="button" class="option" data-value="1" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #26a69a; color: white;">🎉 パーティー</button>
<button type="button" class="option" data-value="2" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #26a69a; color: white;">📚 勉強や仕事</button>
<button type="button" class="option" data-value="3" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #26a69a; color: white;">🛌 リラックス</button>
</div>
<div class="question" style="margin-bottom: 15px;">
<p style="font-size: 1em;">3️⃣ 前日にあったことは？ 🕒🛠️🎁</p>
<button type="button" class="option" data-value="1" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #ab47bc; color: white;">🎁 サプライズ</button>
<button type="button" class="option" data-value="2" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #ab47bc; color: white;">🛠️ 作業や修理</button>
<button type="button" class="option" data-value="3" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #ab47bc; color: white;">🕒 普通の日</button>
</div>
<div class="question" style="margin-bottom: 15px;">
<p style="font-size: 1em;">4️⃣ 今日のラッキーカラーは？ 🎨🟢🔵</p>
<button type="button" class="option" data-value="1" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #42a5f5; color: white;">🔵 青</button>
<button type="button" class="option" data-value="2" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #66bb6a; color: white;">🟢 緑</button>
<button type="button" class="option" data-value="3" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #ffa726; color: white;">🟠 オレンジ</button>
</div>
<div class="question" style="margin-bottom: 15px;">
<p style="font-size: 1em;">5️⃣ 好きな動物は？ 🦁🐱🐸</p>
<button type="button" class="option" data-value="1" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #ef5350; color: white;">🦁 ライオン</button>
<button type="button" class="option" data-value="2" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #ef5350; color: white;">🐱 猫</button>
<button type="button" class="option" data-value="3" style="padding: 10px; margin: 5px; cursor: pointer; border: none; border-radius: 5px; background-color: #ef5350; color: white;">🐸 カエル</button>
</div>
<button type="button" id="submitBtn" style="padding: 10px 20px; font-size: 1em; cursor: pointer; border: none; border-radius: 5px; background-color: #ab47bc; color: white;">結果を見る 🧙♂️</button>
</form>
</div>
<div id="result" style="display: none; animation: fadeIn 1s;">
<h2 id="animalEmoji" style="font-size: 3em;">🦁</h2>
<p id="animalDescription" style="font-size: 1em;">あなたはライオンのように力強く、自信に満ちています。</p>
<p id="advice" style="font-size: 1em;">今日は大胆に挑戦してみましょう！✨</p>
<p id="luckyItem" style="font-size: 1em;">ラッキーアイテム: 🔑 キー</p>
<button id="retryBtn" style="padding: 10px 20px; font-size: 1em; cursor: pointer; border: none; border-radius: 5px; background-color: #26a69a; color: white; margin-top: 20px;">もう一度 🔄</button>
<span id="confetti" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"></span>
</div>
</div>
<script>
const startBtn = document.getElementById('startBtn');
const welcome = document.getElementById('welcome');
const questions = document.getElementById('questions');
const submitBtn = document.getElementById('submitBtn');
const result = document.getElementById('result');
const retryBtn = document.getElementById('retryBtn');
const confetti = document.getElementById('confetti');
let score = 0;
startBtn.addEventListener('click', () => {
welcome.style.display = 'none';
questions.style.display = 'block';
animateClick(startBtn);
});
const options = document.querySelectorAll('.option');
options.forEach(option => {
option.addEventListener('click', () => {
option.classList.add('bounce');
score += parseInt(option.getAttribute('data-value'));
setTimeout(() => {
option.classList.remove('bounce');
option.style.opacity = 0.5;
option.disabled = true;
}, 500);
});
});
submitBtn.addEventListener('click', () => {
if (document.querySelectorAll('.option[disabled="true"]').length < 5) {
alert('すべての質問に答えてください！');
return;
}
questions.style.display = 'none';
showResult();
animateClick(submitBtn);
});
retryBtn.addEventListener('click', () => {
score = 0;
document.querySelectorAll('.option').forEach(option => {
option.style.opacity = 1;
option.disabled = false;
});
result.style.display = 'none';
questions.style.display = 'block';
confetti.innerHTML = '';
animateClick(retryBtn);
});
function showResult() {
const today = new Date();
const seed = today.getFullYear() + today.getMonth() + today.getDate();
const random = (seed * 9301 + 49297) % 233280;
const rand = random / 233280;
const animalRoll = Math.floor(rand * 5);
const animals = [
{ emoji: '🦁', desc: 'ライオン', text: 'あなたはライオンのように力強く、自信に満ちています。', advice: '今日は大胆に挑戦してみましょう！✨', item: '🔑 キー' },
{ emoji: '🐱', desc: '猫', text: '今日は猫のようにリラックスして過ごせるでしょう。', advice: 'リラックスして、自分の時間を大切に。🧘♀️', item: '☕ コーヒー' },
{ emoji: '🐸', desc: 'カエル', text: 'あなたはカエルのように元気いっぱい！社交的な一日です。', advice: '友達と楽しい時間を過ごしましょう！🎉', item: '🍀 四つ葉のクローバー' },
{ emoji: '🐬', desc: 'イルカ', text: 'イルカのように社交的で、周りとのコミュニケーションが鍵となります。', advice: '積極的に話しかけてみてください。💬', item: '📱 スマートフォン' },
{ emoji: '🦋', desc: '蝶', text: 'あなたは蝶のように自由で、変化を楽しめる一日。', advice: '新しいことに挑戦してみましょう！🌟', item: '✈️ 小さな旅行' }
];
const chosen = animals[animalRoll];
document.getElementById('animalEmoji').textContent = chosen.emoji;
document.getElementById('animalDescription').textContent = chosen.text;
document.getElementById('advice').textContent = chosen.advice;
document.getElementById('luckyItem').textContent = `ラッキーアイテム: ${chosen.item}`;
result.style.display = 'block';
addConfetti();
}
function animateClick(button) {
button.classList.add('bounce');
setTimeout(() => {
button.classList.remove('bounce');
}, 500);
}
function addConfetti() {
const colors = ['#f44336', '#e91e63', '#9c27b0', '#2196f3', '#4caf50', '#ffeb3b'];
for (let i = 0; i < 100; i++) {
const confetto = document.createElement('div');
confetto.style.position = 'absolute';
confetto.style.width = '10px';
confetto.style.height = '10px';
confetto.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetto.style.top = Math.random() * 100 + '%';
confetto.style.left = Math.random() * 100 + '%';
confetti.appendChild(confetto);
confetto.classList.add('bounce');
}
}
</script>
</body>
</html>
```