tiennm99/valentine-2025
1
0 Fork 0
mirror of https://github.com/tiennm99/valentine-2025.git synced 2026-10-11 03:13:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: allign, reformat code

Browse Source
This commit is contained in:
tiennm99 committed 2025-02-11 21:47:24 +07:00
1 parent e653d6bd89
commit 5899175857
3 files changed
+270 -189
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+70 -61
View File
@@ -1,73 +1,82 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body class="bg-pink-50"> <body class="bg-pink-50">
<div class="music-controls"> <div class="music-controls">
<audio id="backgroundMusic" loop> <audio id="backgroundMusic" loop>
<source src="until-you.mp3" type="audio/mp3"> <source src="until-you.mp3" type="audio/mp3">
</audio> </audio>
<audio id="successMusic"> <audio id="successMusic">
<source src="i-do.mp3" type="audio/mp3"> <source src="i-do.mp3" type="audio/mp3">
</audio> </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 id="toggleMusic"
🎵 Phát nhạc 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>
<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>
<div class="main-screen flex flex-col items-center justify-center min-h-screen p-4 sm:p-6 md:p-8"> <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 w-full max-w-md mx-auto px-4 sm:px-6"> <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">
<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"> <div class="relative">
<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"
</svg> viewBox="0 0 24 24">
<path
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-pink-600 mb-6 sm:mb-8"> 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" />
Làm người yêu mình nhé? 🥰 </svg>
</h1> <div class="hearts-animation"></div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4"> <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-pink-600 mb-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"> Cùng bắt đầu hành trình với nhau nhé ❤️
Ok luôn ❤️ </h1>
</button> <p class="text-gray-600 text-base sm:text-lg">
Cảm ơn vì đã chọn mình!
<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"> </p>
Không đời nào 😢 <div class="mt-4 space-y-2">
</button> <p class="text-sm sm:text-base text-pink-400" id="startDate"></p>
</div> <p class="text-sm sm:text-base text-pink-400">Chúc mừng chúng ta! 🎉</p>
</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>
</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"> <script src="script.js"></script>
<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="watermark text-center text-gray-500 text-xs mt-4">
<div class="relative"> Created by <a href="https://tiennm99.github.io" target="_blank" class="text-pink-500">miti99</a> with &hearts;
<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"> </div>
<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>
</body> </body>
</html> </html>
script.js
+104 -103
View File
@@ -9,16 +9,16 @@ const successMusic = document.getElementById('successMusic');
const toggleButton = document.getElementById('toggleMusic'); const toggleButton = document.getElementById('toggleMusic');
const noButtonTexts = [ const noButtonTexts = [
'Thật sự không? 🥺', 'Thật sự không? 🥺',
'Nghĩ lại đi mà 😢', 'Nghĩ lại đi mà 😢',
'Đừng bấm nữa, đau lòng lắm 💔', 'Đừng bấm nữa, đau lòng lắm 💔',
'Thôi mà, Yes đi 🥹', 'Thôi mà, Yes đi 🥹',
'Làm người yêu tớ đi 😍', 'Làm người yêu tớ đi 😍',
'Nhớ nghĩ kỹ đấy 🤔', 'Nhớ nghĩ kỹ đấy 🤔',
'Bấm Yes là đẹp đôi 👀', 'Bấm Yes là đẹp đôi 👀',
'Vẫn còn cố chấp sao? 😅', 'Vẫn còn cố chấp sao? 😅',
'Thử nghĩ về tương lai đi 🌟', 'Thử nghĩ về tương lai đi 🌟',
'Ok vậy tớ chọn Yes cho 😘' 'Ok vậy tớ chọn Yes cho 😘'
]; ];
let noCount = 0; let noCount = 0;
@@ -27,130 +27,131 @@ let isMusicPlaying = true;
let isSuccessScreen = false; let isSuccessScreen = false;
const handleMusicTransition = async (from, to) => { const handleMusicTransition = async (from, to) => {
if (!isMusicPlaying) return; if (!isMusicPlaying) return;
const fadeOutInterval = setInterval(() => { const fadeOutInterval = setInterval(() => {
if (from.volume > 0.1) { if (from.volume > 0.1) {
from.volume -= 0.1; from.volume -= 0.1;
} else { } else {
clearInterval(fadeOutInterval); clearInterval(fadeOutInterval);
from.pause(); from.pause();
from.volume = 1.0; from.volume = 1.0;
playNewMusic(to); playNewMusic(to);
} }
}, 100); }, 100);
}; };
const playNewMusic = async (music) => { const playNewMusic = async (music) => {
music.volume = 0; music.volume = 0;
try { try {
await music.play(); await music.play();
const fadeInInterval = setInterval(() => { const fadeInInterval = setInterval(() => {
if (music.volume < 0.9) { if (music.volume < 0.9) {
music.volume += 0.1; music.volume += 0.1;
} else { } else {
clearInterval(fadeInInterval); clearInterval(fadeInInterval);
music.volume = 1.0; music.volume = 1.0;
} }
}, 100); }, 100);
} catch (error) { } catch (error) {
console.log('Music play error:', error); console.log('Music play error:', error);
} }
}; };
const initializeAudio = async () => { const initializeAudio = async () => {
isMusicPlaying = false; isMusicPlaying = false;
toggleButton.textContent = '🎵 Phát nhạc'; toggleButton.textContent = '🎵';
}; };
window.addEventListener('DOMContentLoaded', initializeAudio); window.addEventListener('DOMContentLoaded', initializeAudio);
document.addEventListener('visibilitychange', () => { document.addEventListener('visibilitychange', () => {
if (document.hidden) { if (document.hidden) {
if (isMusicPlaying) { if (isMusicPlaying) {
isSuccessScreen ? successMusic.pause() : backgroundMusic.pause(); isSuccessScreen ? successMusic.pause() : backgroundMusic.pause();
}
} else {
if (isMusicPlaying) {
isSuccessScreen ? successMusic.play() : backgroundMusic.play();
}
} }
} else {
if (isMusicPlaying) {
isSuccessScreen ? successMusic.play() : backgroundMusic.play();
}
}
}); });
toggleButton.addEventListener('click', async () => { toggleButton.addEventListener('click', async () => {
if (isMusicPlaying) { if (isMusicPlaying) {
if (isSuccessScreen) { if (isSuccessScreen) {
successMusic.pause(); successMusic.pause();
} else {
backgroundMusic.pause();
}
toggleButton.textContent = '🎵 Phát nhạc';
} else { } else {
if (isSuccessScreen) { backgroundMusic.pause();
await successMusic.play();
} else {
await backgroundMusic.play();
}
toggleButton.textContent = '🎵 Tạm dừng';
} }
isMusicPlaying = !isMusicPlaying; toggleButton.textContent = '🎵';
} else {
if (isSuccessScreen) {
await successMusic.play();
} else {
await backgroundMusic.play();
}
toggleButton.textContent = '⏸️';
}
isMusicPlaying = !isMusicPlaying;
}); });
const animateNoButton = () => { const animateNoButton = () => {
noButton.classList.add('shake'); noButton.classList.add('shake');
setTimeout(() => noButton.classList.remove('shake'), 500); setTimeout(() => noButton.classList.remove('shake'), 500);
const heart = document.createElement('div'); const heart = document.createElement('div');
heart.innerHTML = '💔'; heart.innerHTML = '💔';
heart.style.position = 'absolute'; heart.style.position = 'absolute';
heart.style.left = `${Math.random() * 100}%`; heart.style.left = `${Math.random() * 100}%`;
heart.style.top = `${Math.random() * 100}%`; heart.style.top = `${Math.random() * 100}%`;
heart.style.animation = 'float 3s ease-out forwards'; heart.style.animation = 'float 3s ease-out forwards';
mainScreen.appendChild(heart); mainScreen.appendChild(heart);
setTimeout(() => heart.remove(), 3000); setTimeout(() => heart.remove(), 3000);
}; };
noButton.addEventListener('click', () => { noButton.addEventListener('click', () => {
noCount++; noCount++;
yesScale = Math.min(yesScale + 0.15, 2); yesScale = Math.min(yesScale + 0.15, 2);
yesButton.style.transform = `scale(${yesScale})`; yesButton.style.transform = `scale(${yesScale})`;
if (noCount < noButtonTexts.length) { if (noCount < noButtonTexts.length) {
noButton.textContent = noButtonTexts[noCount]; noButton.textContent = noButtonTexts[noCount];
} else { } else {
noButton.disabled = true; noButton.disabled = true;
noButton.textContent = 'Hết cách rồi, bấm Yes thôi! 😝'; noButton.textContent = 'Hết cách rồi, bấm Yes thôi! 😝';
noButton.classList.add('opacity-50', 'cursor-not-allowed'); noButton.classList.add('opacity-50', 'cursor-not-allowed');
} }
animateNoButton(); animateNoButton();
message.textContent = noCount < noButtonTexts.length message.textContent = noCount < noButtonTexts.length
? "Bạn vẫn còn cơ hội đổi ý đấy... 😉" ? "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! 😘"; : "Hết cách rồi, giờ chỉ có thể bấm Yes thôi! 😘";
message.classList.remove('hidden'); message.classList.remove('hidden');
message.style.marginTop = `${yesScale * 2}rem`;
}); });
yesButton.addEventListener('click', () => { yesButton.addEventListener('click', () => {
isSuccessScreen = true; isSuccessScreen = true;
mainScreen.style.display = 'none'; mainScreen.style.display = 'none';
successScreen.style.display = 'flex'; successScreen.style.display = 'flex';
startDate.textContent = `Ngày bắt đầu: ${new Date().toLocaleDateString()}`; startDate.textContent = `Ngày bắt đầu: ${new Date().toLocaleDateString()}`;
if (isMusicPlaying) { if (isMusicPlaying) {
handleMusicTransition(backgroundMusic, successMusic); handleMusicTransition(backgroundMusic, successMusic);
} }
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
setTimeout(() => { setTimeout(() => {
const heart = document.createElement('div'); const heart = document.createElement('div');
heart.innerHTML = '❤️'; heart.innerHTML = '❤️';
heart.style.position = 'fixed'; heart.style.position = 'fixed';
heart.style.left = `${Math.random() * 100}%`; heart.style.left = `${Math.random() * 100}%`;
heart.style.bottom = '0'; heart.style.bottom = '0';
heart.style.animation = `float ${2 + Math.random() * 3}s ease-out forwards`; heart.style.animation = `float ${2 + Math.random() * 3}s ease-out forwards`;
document.body.appendChild(heart); document.body.appendChild(heart);
setTimeout(() => heart.remove(), 5000); setTimeout(() => heart.remove(), 5000);
}, i * 300); }, i * 300);
} }
}); });
styles.css
+96 -25
View File
@@ -1,31 +1,71 @@
@keyframes shake { @keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px) rotate(-5deg); } 0%,
75% { transform: translateX(5px) rotate(5deg); } 100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px) rotate(-5deg);
}
75% {
transform: translateX(5px) rotate(5deg);
}
} }
@keyframes float { @keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); } 0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
@keyframes pulse { @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 { @keyframes floating-hearts {
0% { transform: translateY(0) translateX(0) rotate(0); opacity: 1; } 0% {
100% { transform: translateY(-100px) translateX(var(--translate-x)) rotate(var(--rotate)); opacity: 0; } transform: translateY(0) translateX(0) rotate(0);
opacity: 1;
}
100% {
transform: translateY(-100px) translateX(var(--translate-x)) rotate(var(--rotate));
opacity: 0;
}
} }
.shake { .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 { .animate-float {
@@ -74,16 +114,34 @@
.music-controls { .music-controls {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
left: 50%; right: 20px;
transform: translateX(-50%);
z-index: 1000; z-index: 1000;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
padding: 8px 16px; padding: 8px;
border-radius: 9999px; width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px); 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 { .success-screen {
display: none; display: none;
} }
@@ -97,37 +155,50 @@
color: #888; 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) { @media (max-width: 640px) {
.music-controls { .music-controls {
bottom: 10px; bottom: 10px;
padding: 6px 12px; padding: 6px 12px;
width: calc(100% - 32px); width: calc(100% - 32px);
max-width: 300px; max-width: 300px;
} }
.music-controls button { .music-controls button {
width: 100%; width: 100%;
} }
.hearts-animation::before, .hearts-animation::before,
.hearts-animation::after { .hearts-animation::after {
font-size: 1rem; font-size: 1rem;
} }
} }
@media (max-height: 500px) and (orientation: landscape) { @media (max-height: 500px) and (orientation: landscape) {
.music-controls { .music-controls {
bottom: 5px; bottom: 5px;
} }
.main-screen, .main-screen,
.success-screen { .success-screen {
padding: 1rem; padding: 1rem;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.music-controls { .music-controls {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
} }
} }