🎮ArcadeLab

The Spring Equinox Game

by RocketGecko40
128 lines7.1 KB
▶ Play
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>The Spring Equinox Game</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet"/>
    <style>
        body {
            font-family: 'Nunito', sans-serif;
            background: linear-gradient(to right, #fefefe, #f0f9ff);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-between p-6 bg-gray-50">

<!-- Header -->
<header class="text-center py-8 w-full max-w-4xl mx-auto">
    <h1 class="text-4xl md:text-5xl font-bold text-indigo-700">Spring Equinox Quiz Adventure</h1>
    <p class="mt-3 text-lg text-gray-600">Test your knowledge about one of China's most important solar terms!</p>
</header>

<main class="flex-grow w-full max-w-4xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">
    
    <!-- Card 1: Swallows Return -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300 ease-in-out cursor-pointer"
         onclick="showDetail('Swallows return after winter migration.', 'https://picsum.photos/id/106/400/300')">
        <img src="https://picsum.photos/id/106/400/300" alt="Swallows flying near spring fields" class="object-cover h-48 w-full"/>
        <div class="p-5">
            <h2 class="font-semibold text-xl text-gray-800">燕归来<br><span class="text-sm text-gray-500">(Swallows Return)</span></h2>
            <p class="mt-2 text-gray-600 text-sm">Learn how nature awakens at the Spring Equinox.</p>
        </div>
    </div>

    <!-- Card 2: Stand Egg Challenge -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300 ease-in-out cursor-pointer"
         onclick="showDetail('Standing eggs symbolizes good fortune!', 'https://picsum.photos/id/107/400/300')">
        <img src="https://picsum.photos/id/107/400/300" alt="A standing egg on a table" class="object-cover h-48 w-full"/>
        <div class="p-5">
            <h2 class="font-semibold text-xl text-gray-800">立鸡蛋<br><span class="text-sm text-gray-500">(Stand an Egg)</span></h2>
            <p class="mt-2 text-gray-600 text-sm">Try balancing an egg and test physics myths!</p>
        </div>
    </div>

    <!-- Card 3: Eat Spring Vegetables -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300 ease-in-out cursor-pointer"
         onclick="showDetail('Eating seasonal veggies brings health and luck.', 'https://picsum.photos/id/108/400/300')">
        <img src="https://picsum.photos/id/108/400/300" alt="Fresh green vegetables arranged on wooden board" class="object-cover h-48 w-full"/>
        <div class="p-5">
            <h2 class="font-semibold text-xl text-gray-800">吃春菜<br><span class="text-sm text-gray-500">(Eat Spring Veggies)</span></h2>
            <p class="mt-2 text-gray-600 text-sm">Discover why eating seasonally matters in Traditional Chinese Medicine.</p>
        </div>
    </div>

    <!-- Card 4: Worship Sun God -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300 ease-in-out cursor-pointer"
         onclick="showDetail('Ancient rituals honoring the Sun Deity were performed here.', 'https://picsum.photos/id/109/400/300')">
        <img src="https://picsum.photos/id/109/400/300" alt="Traditional temple architecture under sunlight" class="object-cover h-48 w-full"/>
        <div class="p-5">
            <h2 class="font-semibold text-xl text-gray-800">祭太阳神<br><span class="text-sm text-gray-500">(Worship the Sun God)</span></h2>
            <p class="mt-2 text-gray-600 text-sm">Explore traditions tied to celestial movements.</p>
        </div>
    </div>

    <!-- Card 5: Rewarding Oxen -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300 ease-in-out cursor-pointer"
         onclick="showDetail('Farmers honored oxen as heroes of agriculture.', 'https://picsum.photos/id/110/400/300')">
        <img src="https://picsum.photos/id/110/400/300" alt="Farmer feeding cow treats outdoors" class="object-cover h-48 w-full"/>
        <div class="p-5">
            <h2 class="font-semibold text-xl text-gray-800">犒劳耕牛<br><span class="text-sm text-gray-500">(Reward Farm Animals)</span></h2>
            <p class="mt-2 text-gray-600 text-sm">Understand farming culture through animal care practices.</p>
        </div>
    </div>

    <!-- Start Quiz Button -->
    <button id="startQuizBtn"
            class="col-span-full mt-6 py-4 px-8 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 hover:from-blue-600 hover:to-pink-600 text-white font-bold rounded-full shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-linear focus:outline-none">
        Begin Interactive Quiz!
    </button>
</main>

<!-- Modal Detail View -->
<div id="modalBackdrop" class="fixed inset-0 hidden z-50 backdrop-blur-sm bg-black/30" onclick="closeModal()"></div>
<div id="detailModal" class="hidden fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-2xl p-6 z-[100] w-11/12 max-w-lg">
    <button onclick="closeModal()" class="absolute top-3 right-3 text-gray-500 hover:text-red-500"><i class="fas fa-times text-xl"></i></button>
    <img id="modalImage" src="" alt="" class="rounded-lg object-contain h-48 w-full mb-4"/>
    <h3 id="modalTitle" class="text-2xl font-bold text-gray-800 mb-2"></h3>
    <p id="modalDescription" class="text-gray-600 leading-relaxed"></p>
</div>

<script>
function showDetail(description, imageUrl) {
    document.getElementById("modalImage").src = imageUrl;
    document.getElementById("modalImage").alt = description.split('.')[0];
    document.getElementById("modalTitle").innerText = "Tradition Highlight";
    document.getElementById("modalDescription").innerText = description;

    document.getElementById("modalBackdrop").classList.remove("hidden");
    document.getElementById("detailModal").classList.remove("hidden");
}

function closeModal() {
    document.getElementById("modalBackdrop").classList.add("hidden");
    document.getElementById("detailModal").classList.add("hidden");
}

document.getElementById("startQuizBtn").addEventListener("click", function () {
    window.location.href = "./quiz.html"; // Navigate to quiz page
});
</script>

<footer class="py-6 text-center text-gray-600 border-t border-gray-200 w-full">
    © 2026 Learn About Solar Terms | Educational Mini-Games Series
</footer>

</body>
</html>

Game Source: The Spring Equinox Game

Creator: RocketGecko40

Libraries: none

Complexity: moderate (128 lines, 7.1 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: the-spring-equinox-game-rocketgecko40" to link back to the original. Then publish at arcadelab.ai/publish.