feat: allign, reformat code

index.html

@@ -1,12 +1,14 @@
 <!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>
+  <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>
@@ -15,27 +17,31 @@
     <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
+    <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"/>
+        <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">
+      <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">
+        <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>
@@ -47,8 +53,10 @@
   <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 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>
@@ -67,7 +75,8 @@
 
   <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;
+    Created by <a href="https://tiennm99.github.io" target="_blank" class="text-pink-500">miti99</a> with &hearts;
   </div>
 </body>
+
 </html>

script.js

@@ -60,7 +60,7 @@ const playNewMusic = async (music) => {
 
 const initializeAudio = async () => {
   isMusicPlaying = false;
-    toggleButton.textContent = '🎵 Phát nhạc';
+  toggleButton.textContent = '🎵';
 };
 
 window.addEventListener('DOMContentLoaded', initializeAudio);
@@ -84,14 +84,14 @@ toggleButton.addEventListener('click', async () => {
     } else {
       backgroundMusic.pause();
     }
-        toggleButton.textContent = '🎵 Phát nhạc';
+    toggleButton.textContent = '🎵';
   } else {
     if (isSuccessScreen) {
       await successMusic.play();
     } else {
       await backgroundMusic.play();
     }
-        toggleButton.textContent = '🎵 Tạm dừng';
+    toggleButton.textContent = '⏸️';
   }
   isMusicPlaying = !isMusicPlaying;
 });
@@ -129,6 +129,7 @@ noButton.addEventListener('click', () => {
     ? "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', () => {

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,6 +155,19 @@
   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;