feat: allign, reformat code

index.html

@@ -1,73 +1,82 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Valentine Proposal 💝</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="styles.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Valentine 2025 💝</title>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
 </head>
+
 <body class="bg-pink-50">
-    <div class="music-controls">
-        <audio id="backgroundMusic" loop>
-            <source src="until-you.mp3" type="audio/mp3">
-        </audio>
-        <audio id="successMusic">
-            <source src="i-do.mp3" type="audio/mp3">
-        </audio>
-        <button id="toggleMusic" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full text-sm md:text-base">
-            🎵 Phát nhạc
+  <div class="music-controls">
+    <audio id="backgroundMusic" loop>
+      <source src="until-you.mp3" type="audio/mp3">
+    </audio>
+    <audio id="successMusic">
+      <source src="i-do.mp3" type="audio/mp3">
+    </audio>
+    <button id="toggleMusic"
+      class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full text-sm md:text-base">
+      🎵
+    </button>
+  </div>
+
+  <div class="main-screen flex flex-col items-center justify-center min-h-screen p-4 sm:p-6 md:p-8">
+    <div class="text-center w-full max-w-md mx-auto px-4 sm:px-6">
+      <svg class="heart-icon animate-pulse mx-auto mb-4 w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20" viewBox="0 0 24 24">
+        <path
+          d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+      </svg>
+
+      <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-pink-600 mb-6 sm:mb-8">
+        Làm người yêu mình nhé? 🥰
+      </h1>
+
+      <div class="button-container">
+        <button id="yesButton"
+          class="w-full sm:w-auto bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 shadow-lg hover:shadow-xl text-base sm:text-lg">
+          Ok luôn ❤️
         </button>
+
+        <button id="noButton"
+          class="w-full sm:w-auto bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full transition-colors duration-300 text-base sm:text-lg">
+          Không đời nào 😢
+        </button>
+      </div>
+
+      <p id="message" class="mt-6 text-pink-500 italic text-base sm:text-lg md:text-xl animate-fade-in hidden"></p>
     </div>
+  </div>
 
-    <div class="main-screen flex flex-col items-center justify-center min-h-screen p-4 sm:p-6 md:p-8">
-        <div class="text-center w-full max-w-md mx-auto px-4 sm:px-6">
-            <svg class="heart-icon animate-pulse mx-auto mb-4 w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20" viewBox="0 0 24 24">
-                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-            </svg>
-
-            <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-pink-600 mb-6 sm:mb-8">
-                Làm người yêu mình nhé? 🥰
-            </h1>
-
-            <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
-                <button id="yesButton" class="w-full sm:w-auto bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 shadow-lg hover:shadow-xl text-base sm:text-lg">
-                    Ok luôn ❤️
-                </button>
-
-                <button id="noButton" class="w-full sm:w-auto bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full transition-colors duration-300 text-base sm:text-lg">
-                    Không đời nào 😢
-                </button>
-            </div>
-
-            <p id="message" class="mt-6 text-pink-500 italic text-base sm:text-lg md:text-xl animate-fade-in hidden"></p>
-        </div>
+  <div class="success-screen flex flex-col items-center justify-center min-h-screen bg-pink-50 p-4 sm:p-6 md:p-8">
+    <div class="text-center p-6 sm:p-8 rounded-lg bg-white shadow-lg w-full max-w-md mx-auto animate-fade-in">
+      <div class="relative">
+        <svg class="heart-icon animate-pulse mx-auto mb-4 w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20"
+          viewBox="0 0 24 24">
+          <path
+            d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+        </svg>
+        <div class="hearts-animation"></div>
+      </div>
+      <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-pink-600 mb-4">
+        Cùng bắt đầu hành trình với nhau nhé ❤️
+      </h1>
+      <p class="text-gray-600 text-base sm:text-lg">
+        Cảm ơn vì đã chọn mình!
+      </p>
+      <div class="mt-4 space-y-2">
+        <p class="text-sm sm:text-base text-pink-400" id="startDate"></p>
+        <p class="text-sm sm:text-base text-pink-400">Chúc mừng chúng ta! 🎉</p>
+      </div>
     </div>
+  </div>
 
-    <div class="success-screen flex flex-col items-center justify-center min-h-screen bg-pink-50 p-4 sm:p-6 md:p-8">
-        <div class="text-center p-6 sm:p-8 rounded-lg bg-white shadow-lg w-full max-w-md mx-auto animate-fade-in">
-            <div class="relative">
-                <svg class="heart-icon animate-pulse mx-auto mb-4 w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20" viewBox="0 0 24 24">
-                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-                </svg>
-                <div class="hearts-animation"></div>
-            </div>
-            <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-pink-600 mb-4">
-                Cùng bắt đầu hành trình với nhau nhé ❤️
-            </h1>
-            <p class="text-gray-600 text-base sm:text-lg">
-                Cảm ơn vì đã chọn mình!
-            </p>
-            <div class="mt-4 space-y-2">
-                <p class="text-sm sm:text-base text-pink-400" id="startDate"></p>
-                <p class="text-sm sm:text-base text-pink-400">Chúc mừng chúng ta! 🎉</p>
-            </div>
-        </div>
-    </div>
-
-    <script src="script.js"></script>
-    <div class="watermark text-center text-gray-500 text-xs mt-4">
-        Created by <a href="https://miti99.dev" target="_blank" class="text-pink-500">miti99</a> with &hearts;
-    </div>
+  <script src="script.js"></script>
+  <div class="watermark text-center text-gray-500 text-xs mt-4">
+    Created by <a href="https://tiennm99.github.io" target="_blank" class="text-pink-500">miti99</a> with &hearts;
+  </div>
 </body>
+
 </html>

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

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