<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Chọn Một Hộp Bí Ẩn ????</h1>
<p>Mỗi chiếc hộp chứa một thử thách với thời gian giới hạn. Bạn đã sẵn sàng?</p>
<div class="boxes-wrapper">
<div class="box" data-id="0">????<br>Hộp 1</div>
<div class="box" data-id="1">????<br>Hộp 2</div>
<div class="box" data-id="2">????<br>Hộp 3</div>
<div class="box" data-id="3">????<br>Hộp 4</div>
</div>
</div>
<!-- Cửa sổ hiển thị nhiệm vụ (ẩn mặc định) -->
<div id="task-modal" class="modal">
<div class="modal-content">
<h2 id="task-title">Thử Thách Của Bạn!</h2>
<p id="task-desc">Nội dung nhiệm vụ sẽ hiển thị ở đây.</p>
<div class="timer">
⏳ Thời gian còn lại: <span id="time-left">00:00</span>
</div>
<button id="close-btn">Đóng / Kết thúc</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
color: #333;
}
.container {
padding: 20px;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
}
.boxes-wrapper {
display: flex;
gap: 20px;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.box {
background: linear-gradient(135deg, #6dd5ed, #2193b0);
color: white;
width: 120px;
height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 15px;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.box:hover {
transform: translateY(-10px);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
background: linear-gradient(135deg, #2193b0, #6dd5ed);
}
/* Modal Styles */
.modal {
display: none; /* Ẩn mặc định */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: white;
padding: 40px;
border-radius: 15px;
width: 90%;
max-width: 400px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
animation: popIn 0.3s ease-out;
}
@keyframes popIn {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
#task-title {
color: #e74c3c;
margin-bottom: 15px;
}
#task-desc {
font-size: 1.1rem;
margin-bottom: 25px;
line-height: 1.5;
}
.timer {
font-size: 1.5rem;
font-weight: bold;
color: #f39c12;
margin-bottom: 25px;
}
#close-btn {
background-color: #34495e;
color: white;
border: none;
padding: 10px 20px;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#close-btn:hover {
background-color: #2c3e50;
}
// Dữ liệu các nhiệm vụ (Có thể tùy chỉnh nội dung và thời gian tính bằng giây)
const tasks = [
{
title: "Khám phá Căn Bậc 2",
desc: "Gợi ý dùng lệnh mới của JavaScript là Math.sqrt()",
time: 1200
},
{
title: "Nút Hằng số Pi (π) - Siêu nhân Hình học",
desc: "Giúp máy tính có thêm 1 nút Pi (π), bằng cách chỉ cần gán thẳng biến thành con số Pi. Với pi = 3.14159265 ",
time: 1200
},
{
title: "Nút Bình Phương (Lũy thừa bậc 2)",
desc: "chỉ cần viết một hàm mới, chuyển số hiện tại thành kiểu Toán học, rồi nhân nó với chính nó!",
time: 1200
},
{
title: "Bí Mật Ẩn Giấu (Easter Egg)",
desc: "Đây là tính năng rất được các lập trình viên yêu thích. Nếu người dùng vô tình tính ra một kết quả đặc biệt (ví dụ: 100, 999, hoặc năm sinh của tác giả), máy tính sẽ hiện lên một lời chào hoặc tự động đổi màu nền rực rỡ.",
time: 1200
}
];
// Lấy các phần tử DOM
const boxes = document.querySelectorAll('.box');
const modal = document.getElementById('task-modal');
const taskTitle = document.getElementById('task-title');
const taskDesc = document.getElementById('task-desc');
const timeLeftDisplay = document.getElementById('time-left');
const closeBtn = document.getElementById('close-btn');
let countdownInterval;
// Định dạng thời gian (MM:SS)
function formatTime(seconds) {
const m = Math.floor(seconds / 60).toString().padStart(2, '0');
const s = (seconds % 60).toString().padStart(2, '0');
return `${m}:${s}`;
}
// Bắt đầu đếm ngược
function startTimer(duration) {
let timeRemaining = duration;
timeLeftDisplay.textContent = formatTime(timeRemaining);
timeLeftDisplay.style.color = "#f39c12"; // Reset màu vàng
countdownInterval = setInterval(() => {
timeRemaining--;
timeLeftDisplay.textContent = formatTime(timeRemaining);
// Đổi sang màu đỏ khi còn dưới 10 giây
if (timeRemaining <= 10) {
timeLeftDisplay.style.color = "#e74c3c";
}
if (timeRemaining <= 0) {
clearInterval(countdownInterval);
timeLeftDisplay.textContent = "HẾT GIỜ!";
alert("Đã hết thời gian thực hiện thử thách!");
}
}, 1000);
}
// Xử lý sự kiện click vào hộp
boxes.forEach(box => {
box.addEventListener('click', () => {
const boxId = box.getAttribute('data-id');
const selectedTask = tasks[boxId];
// Cập nhật nội dung modal
taskTitle.textContent = selectedTask.title;
taskDesc.textContent = selectedTask.desc;
// Hiển thị modal
modal.style.display = 'flex';
// Xóa bộ đếm cũ nếu có và bắt đầu bộ đếm mới
clearInterval(countdownInterval);
startTimer(selectedTask.time);
});
});
// Xử lý nút Đóng
closeBtn.addEventListener('click', () => {
modal.style.display = 'none';
clearInterval(countdownInterval); // Dừng đồng hồ khi đóng
});
// Đóng modal khi click ra ngoài vùng nội dung
window.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
clearInterval(countdownInterval);
}
});