-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (140 loc) · 5.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magic 8-Ball</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://unpkg.com/lucide-react"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
/* Glow effect for magic ball */
#magic-ball.active {
box-shadow: 0 0 20px 5px rgba(0, 0, 255, 0.5);
}
/* Sparkle/particle effect styling */
.particle {
position: absolute;
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
opacity: 0;
pointer-events: none;
}
/* Optional: Add a transition to the white background and text */
.bg-white {
transition: all 0.3s ease-in-out;
}
</style>
</head>
<body class="bg-gradient-to-br from-indigo-500 to-purple-700 h-screen flex items-center justify-center overflow-hidden">
<div id="app" class="text-center text-white space-y-6">
<!-- Magic 8-Ball with particle container -->
<div id="particle-container" class="absolute inset-0 pointer-events-none"></div>
<!-- 8-Ball container -->
<div id="magic-ball" class="relative w-48 h-48 bg-black rounded-full shadow-lg flex items-center justify-center border-4 border-blue-300 border-opacity-50">
<!-- Circular Answer Display -->
<div id="answer-circle" class="absolute top-1/2 transform -translate-y-1/2 text-center w-28 h-28 bg-blue-500 text-white rounded-full flex items-center justify-center p-4 hidden">
<span id="answer" class="text-xs font-bold leading-tight"></span>
</div>
<!-- Circular "8" Background -->
<div class="absolute bg-white w-20 h-20 rounded-full flex items-center justify-center">
<span class="text-4xl font-bold text-black">8</span>
</div>
</div>
<!-- Input and Button -->
<div class="flex flex-col items-center space-y-4">
<input id="question" type="text" placeholder="Ask a question..."
class="rounded-full p-3 w-72 text-center text-gray-700 focus:outline-none focus:ring-4 focus:ring-blue-300">
<button id="shake" class="px-8 py-2 rounded-full bg-blue-600 hover:bg-blue-500 transition-all duration-300 focus:ring-4 focus:ring-blue-300">
<lucide-icon name="shake" class="inline-block w-5 h-5 mr-2"></lucide-icon> Shake!
</button>
</div>
</div>
<script>
// Array of possible answers
const answers = [
"Yes, definitely!",
"It is certain.",
"Without a doubt.",
"Reply hazy, try again.",
"Ask again later.",
"Better not tell you now.",
"Don't count on it.",
"My sources say no.",
"Very doubtful."
];
// Elements
const questionInput = document.getElementById("question");
const shakeButton = document.getElementById("shake");
const answerDisplay = document.getElementById("answer");
const magicBall = document.getElementById("magic-ball");
const answerCircle = document.getElementById("answer-circle");
const particleContainer = document.getElementById("particle-container");
// Vibration effect function
function vibrateMagicBall() {
gsap.fromTo(
magicBall,
{ x: -2, y: -2 },
{
x: 2,
y: 2,
duration: 0.05,
repeat: 10,
yoyo: true,
ease: "power1.inOut",
onComplete: () => rollMagicBall(),
}
);
}
// Rolling effect for final answer reveal
function rollMagicBall() {
gsap.to(magicBall, {
rotation: 360,
duration: 0.6,
scale: 1.1,
ease: "elastic.out(1, 0.3)",
onComplete: () => revealAnswer(),
});
}
function revealAnswer() {
const eightBackground = magicBall.querySelector(".bg-white"); // Select the "8" background
const eightText = eightBackground.querySelector("span"); // Select the "8" text
// Hide the "8" and its background
gsap.to(eightBackground, { scale: 0, opacity: 0, duration: 0.3 });
// Show the answer
answerCircle.style.display = "flex"; // Ensure it's visible immediately
gsap.to(answerCircle, { scale: 1.2, opacity: 1, duration: 0.3 });
gsap.to(answerCircle, { scale: 1, duration: 0.2 });
// Add particle effect
createParticles();
// Hide the answer and show the "8" again after 3 seconds
setTimeout(() => {
gsap.to(answerCircle, { scale: 0.8, opacity: 0, duration: 0.2 });
setTimeout(() => {
answerCircle.style.display = "none"; // Hide answer circle
gsap.to(eightBackground, { scale: 1, opacity: 1, duration: 0.3 }); // Restore the "8"
}, 200); // Match with animation duration
magicBall.classList.remove("active");
}, 3000);
}
// Shake button event listener
shakeButton.addEventListener("click", () => {
const question = questionInput.value.trim();
// Validate question input
if (!question) {
alert("Please ask a question!");
return;
}
// Clear input
questionInput.value = "";
// Set random answer
const randomAnswer = answers[Math.floor(Math.random() * answers.length)];
answerDisplay.innerText = randomAnswer;
// Start vibration
vibrateMagicBall();
});
</script>
</body>
</html>