<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phi Hành Gia May Mắn</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Nunito', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #7209b7 100%);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* Animated background stars */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 2s infinite alternate;
}
@keyframes twinkle {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 1; transform: scale(1.2); }
}
.container {
display: flex;
height: 100vh;
position: relative;
z-index: 2;
}
/* Left panel - Student input */
.input-panel {
width: 300px;
background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
backdrop-filter: blur(10px);
border-right: 2px solid rgba(255,255,255,0.2);
padding: 20px;
overflow-y: auto;
position: relative;
}
.input-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23ff6b6b" opacity="0.3"/><circle cx="80" cy="30" r="1.5" fill="%234ecdc4" opacity="0.4"/><circle cx="60" cy="70" r="2.5" fill="%23ffe66d" opacity="0.3"/><circle cx="30" cy="80" r="1" fill="%23ff6b6b" opacity="0.5"/></svg>');
pointer-events: none;
}
.panel-title {
color: #fff;
font-size: 18px;
font-weight: 700;
margin-bottom: 15px;
text-align: center;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.student-input {
width: 100%;
padding: 8px 12px;
margin-bottom: 8px;
background: rgba(255,255,255,0.9);
border: 2px solid transparent;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
}
.student-input:focus {
outline: none;
border-color: #4ecdc4;
box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
}
/* Main game area */
.game-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
padding: 40px;
}
/* Astronaut circle */
.astronaut-circle {
position: relative;
width: 600px;
height: 400px;
margin-bottom: 60px;
}
.astronaut {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(145deg, #4ecdc4, #44a08d);
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
box-shadow: 0 8px 25px rgba(0,0,0,0.3), 0 0 20px rgba(78, 205, 196, 0.4);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
cursor: pointer;
}
.astronaut:hover {
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(0,0,0,0.4), 0 0 30px rgba(78, 205, 196, 0.6);
}
.astronaut.spinning {
animation: spin 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.astronaut.winner {
animation: winner-glow 1s infinite alternate;
z-index: 10;
}
@keyframes spin {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
100% { transform: rotate(360deg) scale(1); }
}
@keyframes winner-glow {
0% {
box-shadow: 0 0 20px #ff6b6b, 0 0 40px #ff6b6b, 0 0 60px #ff6b6b;
transform: scale(1.2);
}
100% {
box-shadow: 0 0 30px #ffe66d, 0 0 50px #ffe66d, 0 0 80px #ffe66d;
transform: scale(1.3);
}
}
.student-name {
position: absolute;
top: 90px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,0.95);
padding: 6px 12px;
border-radius: 15px;
font-size: 12px;
font-weight: 700;
color: #2c3e50;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
border: 2px solid rgba(78, 205, 196, 0.3);
}
/* Launch button */
.launch-btn {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #ffe66d, #ff6b6b);
background-size: 300% 300%;
border: none;
padding: 20px 50px;
border-radius: 50px;
font-size: 24px;
font-weight: 800;
color: white;
cursor: pointer;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
transition: all 0.3s ease;
animation: gradient-shift 3s ease infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.launch-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.launch-btn:active {
transform: translateY(-2px);
}
/* Winner announcement */
.winner-announcement {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #ffe66d);
padding: 40px 60px;
border-radius: 25px;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
z-index: 100;
opacity: 0;
scale: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.winner-announcement.show {
opacity: 1;
scale: 1;
}
.winner-text {
font-size: 28px;
font-weight: 800;
color: white;
text-shadow: 0 3px 6px rgba(0,0,0,0.3);
margin-bottom: 15px;
}
.winner-name {
font-size: 36px;
font-weight: 900;
color: #fff;
text-shadow: 0 4px 8px rgba(0,0,0,0.4);
animation: winner-text-glow 1s infinite alternate;
}
@keyframes winner-text-glow {
0% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff; }
100% { text-shadow: 0 0 20px #ffe66d, 0 0 30px #ffe66d, 0 0 40px #ffe66d; }
}
/* Confetti */
.confetti {
position: fixed;
width: 10px;
height: 10px;
background: #ff6b6b;
animation: confetti-fall 3s linear infinite;
}
@keyframes confetti-fall {
0% {
transform: translateY(-100vh) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
/* Smoke effect */
.smoke {
position: absolute;
width: 20px;
height: 20px;
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
border-radius: 50%;
animation: smoke-rise 2s ease-out infinite;
}
@keyframes smoke-rise {
0% {
transform: translateY(0) scale(0.5);
opacity: 0.8;
}
100% {
transform: translateY(-100px) scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="stars"></div>
<div class="container">
<div class="input-panel">
<h3 class="panel-title">🚀 Danh Sách Học Sinh</h3>
<div id="studentInputs"></div>
</div>
<div class="game-area">
<div class="astronaut-circle" id="astronautCircle">
<!-- Astronauts will be generated here -->
</div>
<button class="launch-btn" id="launchBtn">🚀 KHỞI HÀNH 🚀</button>
</div>
</div>
<div class="winner-announcement" id="winnerAnnouncement">
<div class="winner-text">Nhà du hành vũ trụ may mắn là...</div>
<div class="winner-name" id="winnerName"></div>
</div>

<script>
const defaultStudents = [
'Bình An', 'Đào Duy Anh', 'Đức Anh', 'Minh Anh', 'Ngọc Anh', 'Tiến Bách',
'Quang Bảo', 'Gia Bảo', 'Minh Châu', 'Khánh Chi', 'Minh Dương', 'Hải Đăng',
'Minh Đức', 'Hoàng Hải', 'Gia Hàn', 'Minh Khang', 'Đăng Khánh', 'Hải Kiệt',
'Phúc Lâm', 'Hưng Long', 'Thanh Mai', 'Gia Minh', 'Hà My', 'Hải Nam',
'Kim Ngân', 'Minh Ngọc', 'Duy Nguyên', 'Khôi Nguyên', 'Thiện Nhân', 'Tấn Phát',
'Minh Quang', 'Tiến Thành', 'Thu Thảo', 'Quốc Trung', 'Ngọc Uyên', 'Tô Uyên',
'Hạ Vy', 'Hà Phương'
];
const astronautEmojis = ['👨‍🚀', '👩‍🚀', '🧑‍🚀'];
let isSpinning = false;
// Create stars background
function createStars() {
const starsContainer = document.querySelector('.stars');
for (let i = 0; i < 100; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.width = Math.random() * 3 + 1 + 'px';
star.style.height = star.style.width;
star.style.animationDelay = Math.random() * 2 + 's';
starsContainer.appendChild(star);
}
}
// Create student inputs
function createStudentInputs() {
const container = document.getElementById('studentInputs');
defaultStudents.forEach((name, index) => {
const input = document.createElement('input');
input.type = 'text';
input.className = 'student-input';
input.value = name;
input.placeholder = `Học sinh ${index + 1}`;
input.addEventListener('input', updateAstronauts);
container.appendChild(input);
});
}
// Create astronauts in circle
function createAstronauts() {
const circle = document.getElementById('astronautCircle');
const students = getStudentNames();
circle.innerHTML = '';
const radius = 180;
const centerX = 300;
const centerY = 200;
students.forEach((name, index) => {
if (name.trim()) {
const angle = (index / students.length) * 2 * Math.PI;
const x = centerX + radius * Math.cos(angle) - 40;
const y = centerY + radius * Math.sin(angle) - 40;
const astronaut = document.createElement('div');
astronaut.className = 'astronaut';
astronaut.style.left = x + 'px';
astronaut.style.top = y + 'px';
astronaut.innerHTML = astronautEmojis[index % astronautEmojis.length];
const nameLabel = document.createElement('div');
nameLabel.className = 'student-name';
nameLabel.textContent = name;
astronaut.appendChild(nameLabel);
circle.appendChild(astronaut);
}
});
}
// Get student names from inputs
function getStudentNames() {
const inputs = document.querySelectorAll('.student-input');
return Array.from(inputs).map(input => input.value.trim()).filter(name => name);
}
// Update astronauts when inputs change
function updateAstronauts() {
if (!isSpinning) {
createAstronauts();
}
}
// Create confetti
function createConfetti() {
const colors = ['#ff6b6b', '#4ecdc4', '#ffe66d', '#ff8a80', '#81c784'];
for (let i = 0; i < 50; i++) {
setTimeout(() => {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = Math.random() * 3 + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 3000);
}, i * 50);
}
}
// Create smoke effect
function createSmoke(x, y) {
for (let i = 0; i < 10; i++) {
setTimeout(() => {
const smoke = document.createElement('div');
smoke.className = 'smoke';
smoke.style.left = (x + Math.random() * 40 - 20) + 'px';
smoke.style.top = (y + Math.random() * 40 - 20) + 'px';
document.getElementById('astronautCircle').appendChild(smoke);
setTimeout(() => smoke.remove(), 2000);
}, i * 100);
}
}
// Launch animation
function launchAnimation() {
if (isSpinning) return;
const students = getStudentNames();
if (students.length === 0) {
alert('Vui lòng nhập tên học sinh!');
return;
}
isSpinning = true;
const astronauts = document.querySelectorAll('.astronaut');
const launchBtn = document.getElementById('launchBtn');
launchBtn.disabled = true;
launchBtn.textContent = '🌟 ĐANG BAY... 🌟';
// Add spinning animation
astronauts.forEach(astronaut => {
astronaut.classList.add('spinning');
const rect = astronaut.getBoundingClientRect();
createSmoke(rect.left, rect.top);
});
// Select winner after animation
setTimeout(() => {
const winnerIndex = Math.floor(Math.random() * students.length);
const winner = students[winnerIndex];
// Highlight winner
astronauts[winnerIndex].classList.add('winner');
// Show winner announcement
setTimeout(() => {
document.getElementById('winnerName').textContent = winner;
document.getElementById('winnerAnnouncement').classList.add('show');
createConfetti();
}, 500);
// Reset after 5 seconds
setTimeout(() => {
document.getElementById('winnerAnnouncement').classList.remove('show');
astronauts.forEach(astronaut => {
astronaut.classList.remove('spinning', 'winner');
});
launchBtn.disabled = false;
launchBtn.textContent = '🚀 KHỞI HÀNH 🚀';
isSpinning = false;
}, 5000);
}, 3000);
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
createStars();
createStudentInputs();
createAstronauts();
document.getElementById('launchBtn').addEventListener('click', launchAnimation);
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'97a1f7db20792b12',t:'MTc1NzAzNTg5OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>