+
+
+
+
+ Làm người yêu mình nhé? 🥰
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- Làm người yêu mình nhé? 🥰
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ Cùng bắt đầu hành trình với nhau nhé ❤️
+
+
+ Cảm ơn vì đã chọn mình!
+
+
+
+
Chúc mừng chúng ta! 🎉
+
+
-
-
-
-
- Cùng bắt đầu hành trình với nhau nhé ❤️
-
-
- Cảm ơn vì đã chọn mình!
-
-
-
-
Chúc mừng chúng ta! 🎉
-
-
-
-
-
-
- Created by
miti99 with ♥
-
+
+
+ Created by
miti99 with ♥
+
+
diff --git a/script.js b/script.js
index ca891fc..b4ceec1 100644
--- a/script.js
+++ b/script.js
@@ -9,16 +9,16 @@ const successMusic = document.getElementById('successMusic');
const toggleButton = document.getElementById('toggleMusic');
const noButtonTexts = [
- 'Thật sự không? 🥺',
- 'Nghĩ lại đi mà 😢',
- 'Đừng bấm nữa, đau lòng lắm 💔',
- 'Thôi mà, Yes đi 🥹',
- 'Làm người yêu tớ đi 😍',
- 'Nhớ nghĩ kỹ đấy 🤔',
- 'Bấm Yes là đẹp đôi 👀',
- 'Vẫn còn cố chấp sao? 😅',
- 'Thử nghĩ về tương lai đi 🌟',
- 'Ok vậy tớ chọn Yes cho 😘'
+ 'Thật sự không? 🥺',
+ 'Nghĩ lại đi mà 😢',
+ 'Đừng bấm nữa, đau lòng lắm 💔',
+ 'Thôi mà, Yes đi 🥹',
+ 'Làm người yêu tớ đi 😍',
+ 'Nhớ nghĩ kỹ đấy 🤔',
+ 'Bấm Yes là đẹp đôi 👀',
+ 'Vẫn còn cố chấp sao? 😅',
+ 'Thử nghĩ về tương lai đi 🌟',
+ 'Ok vậy tớ chọn Yes cho 😘'
];
let noCount = 0;
@@ -27,130 +27,131 @@ let isMusicPlaying = true;
let isSuccessScreen = false;
const handleMusicTransition = async (from, to) => {
- if (!isMusicPlaying) return;
+ if (!isMusicPlaying) return;
- const fadeOutInterval = setInterval(() => {
- if (from.volume > 0.1) {
- from.volume -= 0.1;
- } else {
- clearInterval(fadeOutInterval);
- from.pause();
- from.volume = 1.0;
- playNewMusic(to);
- }
- }, 100);
+ const fadeOutInterval = setInterval(() => {
+ if (from.volume > 0.1) {
+ from.volume -= 0.1;
+ } else {
+ clearInterval(fadeOutInterval);
+ from.pause();
+ from.volume = 1.0;
+ playNewMusic(to);
+ }
+ }, 100);
};
const playNewMusic = async (music) => {
- music.volume = 0;
- try {
- await music.play();
- const fadeInInterval = setInterval(() => {
- if (music.volume < 0.9) {
- music.volume += 0.1;
- } else {
- clearInterval(fadeInInterval);
- music.volume = 1.0;
- }
- }, 100);
- } catch (error) {
- console.log('Music play error:', error);
- }
+ music.volume = 0;
+ try {
+ await music.play();
+ const fadeInInterval = setInterval(() => {
+ if (music.volume < 0.9) {
+ music.volume += 0.1;
+ } else {
+ clearInterval(fadeInInterval);
+ music.volume = 1.0;
+ }
+ }, 100);
+ } catch (error) {
+ console.log('Music play error:', error);
+ }
};
const initializeAudio = async () => {
- isMusicPlaying = false;
- toggleButton.textContent = '🎵 Phát nhạc';
+ isMusicPlaying = false;
+ toggleButton.textContent = '🎵';
};
window.addEventListener('DOMContentLoaded', initializeAudio);
document.addEventListener('visibilitychange', () => {
- if (document.hidden) {
- if (isMusicPlaying) {
- isSuccessScreen ? successMusic.pause() : backgroundMusic.pause();
- }
- } else {
- if (isMusicPlaying) {
- isSuccessScreen ? successMusic.play() : backgroundMusic.play();
- }
+ if (document.hidden) {
+ if (isMusicPlaying) {
+ isSuccessScreen ? successMusic.pause() : backgroundMusic.pause();
}
+ } else {
+ if (isMusicPlaying) {
+ isSuccessScreen ? successMusic.play() : backgroundMusic.play();
+ }
+ }
});
toggleButton.addEventListener('click', async () => {
- if (isMusicPlaying) {
- if (isSuccessScreen) {
- successMusic.pause();
- } else {
- backgroundMusic.pause();
- }
- toggleButton.textContent = '🎵 Phát nhạc';
+ if (isMusicPlaying) {
+ if (isSuccessScreen) {
+ successMusic.pause();
} else {
- if (isSuccessScreen) {
- await successMusic.play();
- } else {
- await backgroundMusic.play();
- }
- toggleButton.textContent = '🎵 Tạm dừng';
+ backgroundMusic.pause();
}
- isMusicPlaying = !isMusicPlaying;
+ toggleButton.textContent = '🎵';
+ } else {
+ if (isSuccessScreen) {
+ await successMusic.play();
+ } else {
+ await backgroundMusic.play();
+ }
+ toggleButton.textContent = '⏸️';
+ }
+ isMusicPlaying = !isMusicPlaying;
});
const animateNoButton = () => {
- noButton.classList.add('shake');
- setTimeout(() => noButton.classList.remove('shake'), 500);
+ noButton.classList.add('shake');
+ setTimeout(() => noButton.classList.remove('shake'), 500);
- const heart = document.createElement('div');
- heart.innerHTML = '💔';
- heart.style.position = 'absolute';
- heart.style.left = `${Math.random() * 100}%`;
- heart.style.top = `${Math.random() * 100}%`;
- heart.style.animation = 'float 3s ease-out forwards';
- mainScreen.appendChild(heart);
- setTimeout(() => heart.remove(), 3000);
+ const heart = document.createElement('div');
+ heart.innerHTML = '💔';
+ heart.style.position = 'absolute';
+ heart.style.left = `${Math.random() * 100}%`;
+ heart.style.top = `${Math.random() * 100}%`;
+ heart.style.animation = 'float 3s ease-out forwards';
+ mainScreen.appendChild(heart);
+ setTimeout(() => heart.remove(), 3000);
};
noButton.addEventListener('click', () => {
- noCount++;
- yesScale = Math.min(yesScale + 0.15, 2);
- yesButton.style.transform = `scale(${yesScale})`;
+ noCount++;
+ yesScale = Math.min(yesScale + 0.15, 2);
+ yesButton.style.transform = `scale(${yesScale})`;
- if (noCount < noButtonTexts.length) {
- noButton.textContent = noButtonTexts[noCount];
- } else {
- noButton.disabled = true;
- noButton.textContent = 'Hết cách rồi, bấm Yes thôi! 😝';
- noButton.classList.add('opacity-50', 'cursor-not-allowed');
- }
+ if (noCount < noButtonTexts.length) {
+ noButton.textContent = noButtonTexts[noCount];
+ } else {
+ noButton.disabled = true;
+ noButton.textContent = 'Hết cách rồi, bấm Yes thôi! 😝';
+ noButton.classList.add('opacity-50', 'cursor-not-allowed');
+ }
- animateNoButton();
+ animateNoButton();
- message.textContent = noCount < noButtonTexts.length
- ? "Bạn vẫn còn cơ hội đổi ý đấy... 😉"
- : "Hết cách rồi, giờ chỉ có thể bấm Yes thôi! 😘";
- message.classList.remove('hidden');
+ message.textContent = noCount < noButtonTexts.length
+ ? "Bạn vẫn còn cơ hội đổi ý đấy... 😉"
+ : "Hết cách rồi, giờ chỉ có thể bấm Yes thôi! 😘";
+ message.classList.remove('hidden');
+ message.style.marginTop = `${yesScale * 2}rem`;
});
yesButton.addEventListener('click', () => {
- isSuccessScreen = true;
- mainScreen.style.display = 'none';
- successScreen.style.display = 'flex';
- startDate.textContent = `Ngày bắt đầu: ${new Date().toLocaleDateString()}`;
+ isSuccessScreen = true;
+ mainScreen.style.display = 'none';
+ successScreen.style.display = 'flex';
+ startDate.textContent = `Ngày bắt đầu: ${new Date().toLocaleDateString()}`;
- if (isMusicPlaying) {
- handleMusicTransition(backgroundMusic, successMusic);
- }
+ if (isMusicPlaying) {
+ handleMusicTransition(backgroundMusic, successMusic);
+ }
- for (let i = 0; i < 10; i++) {
- setTimeout(() => {
- const heart = document.createElement('div');
- heart.innerHTML = '❤️';
- heart.style.position = 'fixed';
- heart.style.left = `${Math.random() * 100}%`;
- heart.style.bottom = '0';
- heart.style.animation = `float ${2 + Math.random() * 3}s ease-out forwards`;
- document.body.appendChild(heart);
- setTimeout(() => heart.remove(), 5000);
- }, i * 300);
- }
+ for (let i = 0; i < 10; i++) {
+ setTimeout(() => {
+ const heart = document.createElement('div');
+ heart.innerHTML = '❤️';
+ heart.style.position = 'fixed';
+ heart.style.left = `${Math.random() * 100}%`;
+ heart.style.bottom = '0';
+ heart.style.animation = `float ${2 + Math.random() * 3}s ease-out forwards`;
+ document.body.appendChild(heart);
+ setTimeout(() => heart.remove(), 5000);
+ }, i * 300);
+ }
});
diff --git a/styles.css b/styles.css
index cfee714..3d98913 100644
--- a/styles.css
+++ b/styles.css
@@ -1,31 +1,71 @@
@keyframes shake {
- 0%, 100% { transform: translateX(0); }
- 25% { transform: translateX(-5px) rotate(-5deg); }
- 75% { transform: translateX(5px) rotate(5deg); }
+
+ 0%,
+ 100% {
+ transform: translateX(0);
+ }
+
+ 25% {
+ transform: translateX(-5px) rotate(-5deg);
+ }
+
+ 75% {
+ transform: translateX(5px) rotate(5deg);
+ }
}
@keyframes float {
- 0%, 100% { transform: translateY(0); }
- 50% { transform: translateY(-10px); }
+
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 50% {
+ transform: translateY(-10px);
+ }
}
@keyframes fadeIn {
- from { opacity: 0; transform: translateY(20px); }
- to { opacity: 1; transform: translateY(0); }
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
@keyframes pulse {
- 0%, 100% { opacity: 1; transform: scale(1); }
- 50% { opacity: .8; transform: scale(1.1); }
+
+ 0%,
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+
+ 50% {
+ opacity: .8;
+ transform: scale(1.1);
+ }
}
@keyframes floating-hearts {
- 0% { transform: translateY(0) translateX(0) rotate(0); opacity: 1; }
- 100% { transform: translateY(-100px) translateX(var(--translate-x)) rotate(var(--rotate)); opacity: 0; }
+ 0% {
+ transform: translateY(0) translateX(0) rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ transform: translateY(-100px) translateX(var(--translate-x)) rotate(var(--rotate));
+ opacity: 0;
+ }
}
.shake {
- animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
+ animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}
.animate-float {
@@ -74,16 +114,34 @@
.music-controls {
position: fixed;
bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
+ right: 20px;
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
- padding: 8px 16px;
- border-radius: 9999px;
+ padding: 8px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
}
+.music-controls button {
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ color: #ff4081;
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.music-controls button:hover {
+ color: #e91e63;
+}
+
.success-screen {
display: none;
}
@@ -97,37 +155,50 @@
color: #888;
}
+.button-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+#message {
+ margin-top: 2rem;
+ /* Ensure message moves down when buttons scale up */
+}
+
@media (max-width: 640px) {
.music-controls {
- bottom: 10px;
- padding: 6px 12px;
- width: calc(100% - 32px);
- max-width: 300px;
+ bottom: 10px;
+ padding: 6px 12px;
+ width: calc(100% - 32px);
+ max-width: 300px;
}
.music-controls button {
- width: 100%;
+ width: 100%;
}
.hearts-animation::before,
.hearts-animation::after {
- font-size: 1rem;
+ font-size: 1rem;
}
}
@media (max-height: 500px) and (orientation: landscape) {
.music-controls {
- bottom: 5px;
+ bottom: 5px;
}
.main-screen,
.success-screen {
- padding: 1rem;
+ padding: 1rem;
}
}
@media (prefers-color-scheme: dark) {
.music-controls {
- background: rgba(0, 0, 0, 0.7);
+ background: rgba(0, 0, 0, 0.7);
}
}