From 5899175857bc477b8f75a7fde634d02f2fd649b4 Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Tue, 11 Feb 2025 21:47:24 +0700 Subject: [PATCH] feat: allign, reformat code --- index.html | 131 +++++++++++++++++---------------- script.js | 207 +++++++++++++++++++++++++++-------------------------- styles.css | 121 ++++++++++++++++++++++++------- 3 files changed, 270 insertions(+), 189 deletions(-) diff --git a/index.html b/index.html index b62a086..aad9b43 100644 --- a/index.html +++ b/index.html @@ -1,73 +1,82 @@ + - - - Valentine Proposal 💝 - - + + + Valentine 2025 💝 + + + -
- - - +
+ +
+
+ + + + +

+ 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); } }