<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premiere Kids Academy 🎬</title>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700&display=swap" rel="stylesheet">
<style>
:root { --primary: #9992ff; --secondary: #2ecc71; --accent: #f1c40f; --bg: #f0f7ff; --text: #2c3e50; }
body { font-family: 'Nunito', sans-serif; background-color: var(--bg); color: var(--text); margin: 0; }
#header { background: white; padding: 15px 30px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 100; }
.progress-container { width: 50%; height: 20px; background: #e0eefd; border-radius: 10px; overflow: hidden; }
#progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--secondary), #58cc02); transition: width 0.5s ease; }
.stats { font-family: 'Fredoka One', cursive; color: var(--accent); font-size: 1.2rem; }
.lesson-card { max-width: 700px; margin: 40px auto; background: white; border-radius: 30px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-bottom: 8px solid #ddd; text-align: center; }
h1 { font-family: 'Fredoka One', cursive; color: var(--primary); font-size: 2.2rem; margin-bottom: 10px; }
.emoji-stage { font-size: 6rem; margin: 20px 0; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.btn { background: var(--secondary); color: white; border: none; padding: 18px 45px; border-radius: 25px; font-family: 'Fredoka One', cursive; font-size: 1.4rem; cursor: pointer; box-shadow: 0 6px 0 #27ae60; transition: 0.1s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #27ae60; }
.choice-box { display: flex; justify-content: space-around; margin-top: 30px; }
.choice-btn { background: white; border: 3px solid var(--primary); padding: 20px; border-radius: 20px; cursor: pointer; font-size: 1.2rem; width: 40%; transition: 0.2s; }
.choice-btn:hover { background: var(--bg); transform: scale(1.05); }
</style>
</head>
<body>
<div id="header">
<div class="stats">⭐ <span id="xp">0</span> XP</div>
<div class="progress-container"><div id="progress-bar"></div></div>
<div class="stats" id="lesson-number">Lesson 1</div>
</div>
<div id="game-content"></div>
<script>
let currentLesson = 0;
let xp = 0;
const lessons = [
{
title: "What is Editing?",
emoji: "👨🍳",
text: "Editing is like being a Chef! You take raw carrots and meat (Video clips), chop off the yucky bits, and mix them together to make a yummy soup (Your Movie!).",
type: "info"
},
{
title: "The Soup Game",
emoji: "🍲",
text: "If you have a video of a dog playing and a video of a wall... which one do you keep for your movie?",
type: "quiz",
choices: ["The Boring Wall", "The Happy Dog"],
correct: 1
},
{
title: "Meet Premiere Pro",
emoji: "🎬",
text: "Adobe Premiere Pro is your 'Magic Kitchen.' It's where the biggest movies in the world are cooked! Ready to see the kitchen?",
type: "info"
},
{
title: "Installing the Magic Box",
emoji: "📦",
text: "To get Premiere, we use the 'Creative Cloud.' It's like a giant digital backpack in the sky where Adobe keeps all its toys!",
type: "info"
},
{
title: "The Blank Page",
emoji: "📝",
text: "Starting a project is like getting a brand new notebook. We have to give it a name! What should we name our first movie?",
type: "quiz",
choices: ["Cool Movie 1", "Untitled_Final_Final2"],
correct: 0
}
];
function showLesson() {
const lesson = lessons[currentLesson];
const container = document.getElementById('game-content');
document.getElementById('lesson-number').innerText = `Step ${currentLesson + 1}`;
let contentHtml = `
<div class="lesson-card">
<h1>${lesson.title}</h1>
<div class="emoji-stage">${lesson.emoji}</div>
<p style="font-size: 1.4rem;">${lesson.text}</p>
`;
if (lesson.type === "quiz") {
contentHtml += `<div class="choice-box">`;
lesson.choices.forEach((choice, index) => {
contentHtml += `<button class="choice-btn" onclick="checkAnswer(${index})">${choice}</button>`;
});
contentHtml += `</div>`;
} else {
contentHtml += `<button class="btn" onclick="moveNext()">I UNDERSTAND! ➔</button>`;
}
contentHtml += `</div>`;
container.innerHTML = contentHtml;
const prog = (currentLesson / lessons.length) * 100;
document.getElementById('progress-bar').style.width = prog + "%";
}
function checkAnswer(index) {
if (index === lessons[currentLesson].correct) {
confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
xp += 100;
document.getElementById('xp').innerText = xp;
moveNext();
} else {
alert("Oops! Try again, Movie Maker! 🎥");
}
}
function moveNext() {
currentLesson++;
if (currentLesson < lessons.length) {
showLesson();
} else {
document.getElementById('game-content').innerHTML = `
<div class="lesson-card">
<h1>GRADUATED! 🎓</h1>
<div class="emoji-stage">🌟</div>
<p>You finished the first adventure! You're ready for the BIG TERMINOLOGY world!</p>
<button class="btn" onclick="location.reload()">PLAY AGAIN</button>
</div>
`;
confetti({ particleCount: 300, spread: 100 });
}
}
showLesson();
</script>
</body>
</html>