Bạn đã chán việc thể hiện tình cảm qua những cuộc trò chuyện cũ rích? Bạn muốn tìm một cách khác biệt để rủ ai đó đi chơi, vừa "ngốc nghếch" một chút, nhưng vẫn đảm bảo hài hước và đáng nhớ? Sao không thử tạo một trang web riêng cho mình nhỉ?
Hãy tưởng tượng thế này: bạn gửi một đường link cho người bạn thầm thương trộm nhớ. Khi họ mở ra, một trang web ngọt ngào hiện ra với câu hỏi: "Em/anh có muốn làm bạn gái/bạn trai của anh không?". Bên dưới là hai nút: "CHỈ CÓ!" và "KHÔNG".“
Phần thú vị ở đây là: mỗi lần họ cố gắng nhấp vào "Không", nút sẽ chạy đi và di chuyển đến một vị trí khác trên màn hình. Họ càng cố gắng từ chối, nó càng trở nên khó khăn hơn, và nút "TUYỆT ĐỐI!" sẽ càng to hơn.
Đây là "Mã HTML dễ thương" — một cách sáng tạo để thể hiện sự nỗ lực mà ít nhất sẽ khiến người bạn thích bật cười.
Bài viết này sẽ cung cấp cho bạn hướng dẫn đầy đủ, bao gồm mã HTML, để tạo trang thú nhận tương tác này.
Tập lệnh HTML dễ thương là gì?
Nói một cách đơn giản, đó là một .html tập tin chứa ba phần tử:
- HTML: Là khung hoặc cấu trúc của trang. Phần này hiển thị văn bản, ảnh GIF và hai nút.
- CSS (Tailwind): Để “trang trí” trang web. CSS xử lý bố cục, màu sắc, phông chữ và hình ảnh động để trang web trông đẹp mắt và chuyên nghiệp.
- JavaScript: Đây chính là "bộ não" đằng sau trò nghịch ngợm này. JavaScript chịu trách nhiệm phát hiện khi con trỏ tiến đến nút "Không" và ngay lập tức di chuyển nó đến một vị trí ngẫu nhiên, đồng thời thay đổi văn bản thành một thứ gì đó vui nhộn hơn.
Sự kết hợp của ba yếu tố này tạo nên trải nghiệm trò chơi nhỏ dễ thương và mang tính tương tác.
Tại sao lại mời ai đó đi chơi bằng kịch bản?
Trong thời đại số này, phương pháp này có một số ưu điểm:
- Độc đáo và đáng nhớ: Rõ ràng điều này đáng nhớ hơn nhiều so với tin nhắn "Anh thích em" trên WhatsApp hoặc DM.
- Thể hiện sự nỗ lực: Bạn không chỉ đang gõ một tin nhắn; bạn đang xây dựng điều gì đó. Điều này thể hiện sự tận tâm và ý định chân thành (ngay cả khi phương pháp này có phần tinh nghịch).
- Hài hước và phá vỡ sự im lặng: Bản chất giống trò chơi của nó có thể làm giảm căng thẳng. Nếu họ cười, đó đã là một khởi đầu tuyệt vời rồi!
- Tương tác: Họ không chỉ đọc mà còn tương tác. Điều này tạo nên trải nghiệm cá nhân và thú vị hơn.
Cách tạo và sử dụng tập lệnh (Hướng dẫn đầy đủ)
Bạn đã sẵn sàng hành động chưa? Hãy làm theo các bước sau.
Bước 1: Sao chép toàn bộ mã
Đây là toàn bộ mã bạn cần. Bạn không cần thay đổi gì cả trừ khi bạn muốn thay đổi văn bản hoặc liên kết GIF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Một tin nhắn dành cho bạn ❤️</title>
<!-- Load Tailwind CSS -->
<script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>
<!-- Load Custom Fonts (Gochi Hand for handwritten & Inter for body) -->
<style>
@import url('[https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Inter:wght@400;700&display=swap](https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Inter:wght@400;700&display=swap)');
body {
font-family: 'Inter', sans-serif;
/* Soft background gradient effect */
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4f46e5 100%);
overflow: hidden; /* Prevents scrolling when the button moves */
}
/* Custom font for the question, makes it feel personal */
.font-question {
font-family: 'Gochi Hand', cursive;
}
/* Set up the "No" button to be movable */
#no-button {
position: absolute;
transition: all 0.3s ease-in-out;
/* Ensure this button is on top of other elements when moving */
z-index: 10;
}
/* The "Yes" button will be on top if they overlap */
#yes-button {
position: relative;
z-index: 20;
}
</style>
</head>
<body class="text-white min-h-screen flex items-center justify-center p-4">
<!-- Main Content: The Question -->
<div id="main-content" class="bg-gray-900 bg-opacity-70 backdrop-blur-lg p-8 md:p-12 rounded-2xl shadow-2xl text-center max-w-lg w-full transition-all duration-500 ease-in-out transform scale-100 opacity-100">
<!-- Cute Opening GIF -->
<img src="[https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM3ZkZ3h5dG9qbnYybjBqNnZ2OHJ0bTlnNGg2dHd3dDZtMmk1cDRsZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/cLS1cfxvGOPVpf9g3v/giphy.gif](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM3ZkZ3h5dG9qbnYybjBqNnZ2OHJ0bTlnNGg2dHd3dDZtMmk1cDRsZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/cLS1cfxvGOPVpf9g3v/giphy.gif)"
alt="GIF nhút nhát dễ thương"
class="w-48 h-48 mx-auto rounded-full mb-6 shadow-lg border-4 border-pink-400 object-cover">
<h1 class="font-question text-4xl md:text-5xl font-bold text-pink-400 mb-6">
Này bạn ơi...
</h1>
<p class="text-2xl md:text-3xl mb-10 font-question text-gray-200">
Tôi có một câu hỏi... nhưng đừng giận nhé?
</p>
<p class="text-xl md:text-2xl mb-10 font-semibold text-white">
Em có muốn làm bạn gái/bạn trai của anh không? 🥺👉👈
</p>
<!-- Button Container -->
<!-- Made 'relative' so the "No" button can move within it -->
<div class="relative flex flex-col sm:flex-row justify-center items-center gap-4 h-24">
<!-- The "Yes" Button -->
<button id="yes-button"
class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300 transform hover:scale-110 shadow-lg">
TUYỆT ĐỐI!
</button>
<!-- The "No" Button (The one that moves) -->
<button id="no-button"
class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300 shadow-lg"
style="left: 55%; transform: translateX(-50%);">
KHÔNG.
</button>
</div>
</div>
<!-- Success Message (Hidden) -->
<div id="success-message"
class="hidden bg-gray-900 bg-opacity-70 backdrop-blur-lg p-8 md:p-12 rounded-2xl shadow-2xl text-center max-w-lg w-full transition-all duration-500 ease-in-out transform scale-0 opacity-0">
<!-- Success/Love GIF -->
<img src="[https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGphY3k1N3VqajJ0bTgzZzdoY2U1N3Z0bGh5NnlqaWZnZDAweHFuZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/9GimADhYmMB2ssdNf3/giphy.gif](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGphY3k1N3VqajJ0bTgzZzdoY2U1N3Z0bGh5NnlqaWZnZDAweHFuZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/9GimADhYmMB2ssdNf3/giphy.gif)"
alt="GIF tình yêu"
class="w-48 h-48 mx-auto rounded-full mb-6 shadow-lg border-4 border-green-400 object-cover">
<h1 class="font-question text-5xl md:text-6xl font-bold text-green-400 mb-6">
TUYỆT VỜI!
</h1>
<p class="text-2xl md:text-3xl font-question text-gray-200 mb-8">
Hehe, mình thích bạn quá! ❤️
</p>
<p class="text-lg text-gray-300">
(Nhắn tin cho tôi sau khi bạn thấy điều này nhé?)
</p>
</div>
<script>
const yesButton = document.getElementById('yes-button');
const noButton = document.getElementById('no-button');
const mainContent = document.getElementById('main-content');
const successMessage = document.getElementById('success-message');
// Funny texts for the "No" button
const noButtonTexts = [
"No.",
"Are you sure? :(",
"Please?",
"C'mon!",
"You can't say no!",
"Just press 'Yes' >.<",
"Don't be like that :'(",
"I'll treat you to dinner",
"HMMMMM"
];
let yesButtonScale = 1; // Initial scale of the "Yes" button
let noButtonTextIndex = 0; // Index for the "No" button text
// When the "Yes" button is clicked
yesButton.addEventListener('click', () => {
// Hide the main content
mainContent.classList.add('scale-0', 'opacity-0');
// Show the success message after 500ms
setTimeout(() => {
mainContent.classList.add('hidden');
successMessage.classList.remove('hidden', 'scale-0', 'opacity-0');
successMessage.classList.add('scale-100', 'opacity-100');
}, 500);
});
// Function to move the "No" button
function moveButton() {
// Get the viewport size
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Get the button size
const buttonWidth = noButton.offsetWidth;
const buttonHeight = noButton.offsetHeight;
// Calculate a new random position
let newX = Math.random() * (viewportWidth - buttonWidth - (viewportWidth * 0.1));
let newY = Math.random() * (viewportHeight - buttonHeight - (viewportHeight * 0.1));
newX += (viewportWidth * 0.05);
newY += (viewportHeight * 0.05);
// Apply the new position
noButton.style.position = 'fixed';
noButton.style.left = `${newX}px`;
noButton.style.top = `${newY}px`;
// Enlarge the "Yes" button
yesButtonScale += 0.2;
yesButton.style.transform = `scale(${yesButtonScale})`;
yesButton.style.transition = 'transform 0.3s ease';
// Change the "No" button text
noButtonTextIndex = (noButtonTextIndex + 1) % noButtonTexts.length;
noButton.innerText = noButtonTexts[noButtonTextIndex];
}
// Move the button when the mouse hovers over it
noButton.addEventListener('mouseover', moveButton);
// Move the button when it's clicked (for mobile devices)
noButton.addEventListener('click', moveButton);
</script>
</body>
</html>
Bước 2: Lưu mã dưới dạng tệp HTML
- Mở một chương trình soạn thảo văn bản đơn giản như Sổ tay (trên Windows) hoặc Chỉnh sửa văn bản (trên máy Mac).
- Dán toàn bộ mã ở trên vào đó.
- Nhấp vào “Tệp” > “Lưu dưới dạng…”.
- Trong “Tên tệp” trường, loại
index.html. - Trong “Lưu dưới dạng loại” trường, hãy đảm bảo bạn chọn “Tất cả các tập tin”.
- Nhấp vào “Lưu”.
Bây giờ bạn có một index.html Tệp tin mà bạn có thể mở trong trình duyệt. Nhưng khoan đã, nó vẫn nằm trên máy tính của bạn. Người bạn thích không thể thấy nó. Bạn cần tải nó lên Internet.
Bước 3: Tải tập lệnh lên để đưa lên mạng (Miễn phí!)
Bạn không thể gửi một index.html tập tin qua WA. Bạn phải gửi một liên kết. Cách dễ nhất để có được liên kết là tải tệp của bạn lên dịch vụ lưu trữ tĩnh miễn phí.
Lựa chọn 1: Netlify Drop (Dễ nhất)
- Mở app.netlify.com/drop trong trình duyệt của bạn.
- Bạn sẽ thấy một hộp cho kéo và thả.
- Kéo
index.htmltệp bạn vừa lưu và thả nó vào hộp. - Đợi vài giây…
- Xong! Netlify sẽ ngay lập tức cung cấp cho bạn một liên kết công khai (ví dụ:
https://random-funny-name.netlify.app). Đây là liên kết bạn gửi cho người bạn thích!
Lựa chọn 2: CodePen
- Đi đến codepen.io và đăng ký tài khoản miễn phí.
- Tạo một “Bút” mới.
- Sao chép các phần của mã vào 3 hộp tương ứng (mã bên trong
...đi vào hộp CSS, mã bên trong<script>...</script>sẽ được đưa vào hộp JS và phần còn lại sẽ được đưa vào hộp HTML). - Lưu Bút của bạn và bạn sẽ nhận được liên kết để chia sẻ.
Bước 4: Gửi liên kết!
Giờ thì bạn đã có vũ khí tối thượng: một đường link. Hãy gửi nó cho người bạn thầm thương trộm nhớ kèm theo một lời nhắn mở đầu thật thân mật.
Ví dụ:
- “Này, mình đang học lập trình và làm ra cái này. Xem thử nhé 😆 [your-link-here]”
- “Tôi có một câu hỏi quan trọng, nhưng bạn phải trả lời ở đây… [your-link-here]”
- “Mở cái này trong trình duyệt của bạn, có một điều bất ngờ nho nhỏ hehe [your-link-here]”
Kết luận: Một cách hiện đại để thể hiện sự quan tâm của bạn
Việc tạo ra trang web nhỏ này là một điều thú vị, sáng tạo và chắc chắn chống lại dòng chính thống cách thể hiện cảm xúc của bạn. Đây là bằng chứng thực tế cho thấy "nỗ lực" có nhiều hình thức, bao gồm cả mã.
Mặc dù đây chỉ là một dự án vui, nhưng nó là bước khởi đầu tuyệt vời vào thế giới phát triển web. Biết đâu, từ việc viết một đoạn mã dễ thương, bạn có thể sẽ hứng thú với việc xây dựng các trang web hoặc ứng dụng thực tế.
Và khi bạn đã sẵn sàng biến những ý tưởng lớn của mình thành hiện thực trực tuyến, lưu trữ web Quape là nơi lý tưởng để bắt đầu. Chúng tôi cung cấp một nền tảng đáng tin cậy và nhanh chóng cho mọi dự án web của bạn, từ đơn giản đến phức tạp.
Chúc may mắn!
- Apache là gì? Hướng dẫn đơn giản cho người mới bắt đầu - Tháng 10 27, 2025
- Nginx là gì? Hướng dẫn đơn giản cho người mới bắt đầu - Tháng 10 27, 2025
- Drupal là gì và cách cài đặt dễ dàng - Tháng 10 24, 2025
