File size: 8,480 Bytes
be3690e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>At the Airport | QuantumCode</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/voice-track.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Space Grotesk', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
.gradient-text {
background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.glass-card {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
}
.scene {
transition: all 0.3s ease;
}
.progress-bar {
height: 8px;
border-radius: 4px;
background: rgba(124, 58, 237, 0.2);
}
.progress-fill {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
}
</style>
</head>
<body class="min-h-screen">
<nav class="px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="cpu" class="text-indigo-500"></i>
<span class="text-xl font-bold gradient-text">QuantumCode</span>
</div>
<div class="flex items-center space-x-2">
<a href="i18n-setup.html" class="flex items-center text-sm hover:text-indigo-400 transition-colors">
<i data-feather="globe" class="w-4 h-4 mr-1"></i>
<span id="currentLang">EN</span>
</a>
</div>
</nav>
<main class="container mx-auto px-4 py-16">
<section class="max-w-4xl mx-auto">
<div class="flex justify-between items-center mb-8">
<h1 class="text-3xl md:text-4xl font-bold gradient-text">At the Airport</h1>
<div class="text-xl font-medium">
Score: <span id="currentScore" class="text-indigo-400">0</span>/100
</div>
</div>
<div class="glass-card p-8 mb-8">
<div class="scene" id="scene1">
<h3 class="text-xl font-bold mb-4">Check-in Counter</h3>
<p class="text-slate-300 mb-6">You're checking in for your flight. The agent asks for your passport and boarding details.</p>
<div class="glass-card p-6 mb-6">
<p class="mb-4">Agent: "Good morning. May I see your passport and boarding pass, please?"</p>
<voice-track></voice-track>
<p class="mt-4 text-sm text-slate-400">Try saying: "Here's my passport and boarding pass."</p>
</div>
<button id="nextScene1" class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition-colors">
Continue to Security
</button>
</div>
<div class="scene hidden" id="scene2">
<h3 class="text-xl font-bold mb-4">Security Checkpoint</h3>
<p class="text-slate-300 mb-6">The security officer needs to check your belongings before you proceed.</p>
<div class="glass-card p-6 mb-6">
<p class="mb-4">Officer: "Please remove your shoes, belt, and any metal objects. Do you have any liquids?"</p>
<voice-track></voice-track>
<p class="mt-4 text-sm text-slate-400">Try saying: "No liquids, just these items."</p>
</div>
<button id="nextScene2" class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition-colors">
Continue to Gate
</button>
</div>
<div class="scene hidden" id="scene3">
<h3 class="text-xl font-bold mb-4">Boarding Gate</h3>
<p class="text-slate-300 mb-6">You've reached the boarding gate and need to confirm your seat.</p>
<div class="glass-card p-6 mb-6">
<p class="mb-4">Agent: "Welcome aboard. May I see your boarding pass? Your seat number is 24B."</p>
<voice-track></voice-track>
<p class="mt-4 text-sm text-slate-400">Try saying: "Thank you. Which way to seat 24B?"</p>
</div>
<button id="completeGame" class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition-colors">
Complete Game
</button>
</div>
<div class="progress-bar w-full mb-2 mt-6">
<div class="progress-fill" id="progressBar" style="width: 0%"></div>
</div>
<div class="text-right text-sm text-slate-400">
Progress: <span id="progressText">0</span>%
</div>
</div>
<div class="text-center">
<a href="gamequest.html" class="inline-flex items-center px-6 py-3 border border-indigo-500 text-indigo-400 hover:bg-indigo-900/50 rounded-full font-medium transition-colors">
<i data-feather="arrow-left" class="mr-2"></i>
Back to GameQuest
</a>
</div>
</section>
</main>
<script>
let currentScore = 0;
let currentScene = 1;
let progress = 0;
// Scene navigation
document.getElementById('nextScene1').addEventListener('click', () => {
document.getElementById('scene1').classList.add('hidden');
document.getElementById('scene2').classList.remove('hidden');
currentScene = 2;
updateScore(30);
});
document.getElementById('nextScene2').addEventListener('click', () => {
document.getElementById('scene2').classList.add('hidden');
document.getElementById('scene3').classList.remove('hidden');
currentScene = 3;
updateScore(30);
});
document.getElementById('completeGame').addEventListener('click', () => {
updateScore(40);
completeGame();
});
// Update score and progress
function updateScore(points) {
currentScore += points;
document.getElementById('currentScore').textContent = currentScore;
progress = Math.min(currentScore / 100 * 100, 100);
document.getElementById('progressBar').style.width = `${progress}%`;
document.getElementById('progressText').textContent = Math.floor(progress);
}
function completeGame() {
// Save game stats
const stats = JSON.parse(localStorage.getItem('gamequestStats')) || {
gamesPlayed: 0,
totalScore: 0,
highScore: 0
};
stats.gamesPlayed += 1;
stats.totalScore += currentScore;
if (currentScore > stats.highScore) {
stats.highScore = currentScore;
}
localStorage.setItem('gamequestStats', JSON.stringify(stats));
alert(`Congratulations! You scored ${currentScore}/100 points.`);
}
// Set initial language
document.getElementById('currentLang').textContent =
document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';
feather.replace();
</script>
</body>
</html> |