<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags and Title -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Learning - Space Mining Course</title>

    <!-- SEO Meta Tags -->
    <meta name="description" content="Interactive Learning Modules for Space Mining - Speco">
    <meta name="keywords" content="space mining, interactive learning, asteroid mining, futuristic education">
    <meta name="author" content="Speco Team">

    <!-- Favicon and Fonts -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

    <!-- Stylesheet -->
    <style>
        /* Base Styles */
        * {
            box-sizing: border-box;
        }
        body {
            background: radial-gradient(circle at top right, #0d0d0d, #1a1a1a);
            color: #e0e0e0;
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
        }
        a {
            color: #00ccff;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        /* Container */
        #app-container {
            max-width: 1400px;
            margin: auto;
            padding: 20px;
        }
        /* Header */
        header {
            text-align: center;
            padding: 40px;
            background: linear-gradient(135deg, #1f1f2e, #2b2b3c);
            border-radius: 15px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }
        header h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: 3rem;
            z-index: 1;
            position: relative;
            color: #e0e0e0;
        }
        header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, transparent, #4b0082);
            animation: spin 20s linear infinite;
            opacity: 0.1;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        /* Main Content */
        .content-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .module-section, .interactive-section {
            flex: 1 1 48%;
            background: linear-gradient(135deg, #232334, #2e2e44);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
            position: relative;
        }
        .interactive-section {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .embed-side-container {
            width: 100%;
            margin-top: 40px;
            padding: 20px;
            background: linear-gradient(135deg, #1a1a2e, #29293f);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
            transition: transform 0.5s, box-shadow 0.5s;
            position: relative;
        }
        .embed-side-container::before {
            content: 'Speco Video Module';
            position: absolute;
            top: -30px;
            left: 20px;
            font-size: 1.5rem;
            font-weight: bold;
            color: #00ccff;
            background: #232334;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
        }
        .embed-side-container:hover {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 1);
        }
        .embed-side-container iframe {
            width: 100%;
            height: 400px;
            border: none;
            border-radius: 15px;
        }
        .module-section h2, .interactive-section h2 {
            font-size: 2rem;
            color: #00ccff;
            margin-bottom: 20px;
        }
        /* Modules */
        .module-card {
            background: #2b2b3c;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: transform 0.3s;
        }
        .module-card:hover {
            transform: scale(1.02);
        }
        .module-card h3 {
            font-size: 1.5rem;
            color: #00ccff;
            margin-bottom: 10px;
        }
        .module-card p {
            font-size: 1rem;
            color: #e0e0e0;
        }
        /* Interactive Questions */
        .interactive-question {
            background: #2b2b3c;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .interactive-question:hover {
            background: #353547;
        }
        .interactive-question h4 {
            font-size: 1.2rem;
            color: #e0e0e0;
        }
        .question-answer {
            display: none;
            background: #232334;
            border-radius: 10px;
            padding: 15px;
            margin-top: -10px;
            margin-bottom: 15px;
            font-size: 1rem;
            color: #e0e0e0;
        }
        /* Embeds */
        .embed-container {
            margin-top: 40px;
            padding: 40px;
            background: linear-gradient(135deg, #1a1a2e, #29293f);
            border-radius: 25px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.5s, box-shadow 0.5s;
        }
        .embed-container:hover {
            transform: scale(1.08);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 1);
        }
        .embed-container iframe {
            width: 100%;
            height: 400px;
            border: none;
            border-radius: 20px;
        }
        .embed-container h3 {
            font-size: 2rem;
            color: #00ccff;
            margin-bottom: 20px;
        }
        /* Footer */
        footer {
            text-align: center;
            padding: 20px;
            background: #1f1f2e;
            border-radius: 15px;
            margin-top: 30px;
        }
        footer p {
            font-size: 1rem;
            color: #e0e0e0;
        }
    </style>
</head>
<body>
    <div id="app-container">
        <!-- Header -->
        <header>
            <h1>Interactive Learning - Space Mining Course</h1>
        </header>

        <div class="content-container">
            <!-- Modules Section -->
            <section class="module-section">
                <h2>SPACE MINING: FROM THEORY TO PRACTICE</h2>

                <!-- Part 1: Introduction to Space Mining -->
                <div class="module-card" onclick="location.href='lecture1.html'">
                    <h3>Part 1: Introduction to Space Mining (Lectures 1-10)</h3>
                    <p>Explore the early history of space exploration and understand the fundamental reasons behind mining in space. Learn about key resources and economic potential.</p>
                </div>

                <!-- Part 2: Foundations of Mining in Space -->
                <div class="module-card" onclick="location.href='lecture11.html'">
                    <h3>Part 2: Foundations of Mining in Space (Lectures 11-20)</h3>
                    <p>Dive into the details of space geology, mining techniques in low gravity, and space robotics. Understand what it takes to extract resources from celestial bodies.</p>
                </div>

                <!-- Part 3: Asteroid Mining -->
                <div class="module-card" onclick="location.href='lecture21.html'">
                    <h3>Part 3: Asteroid Mining (Lectures 21-40)</h3>
                    <p>Learn about the key technologies involved in asteroid mining, including surveying, resource extraction, and the economic potential of mining asteroids.</p>
                </div>

                <!-- Part 4: Lunar and Martian Mining -->
                <div class="module-card" onclick="location.href='lecture41.html'">
                    <h3>Part 4: Lunar and Martian Mining (Lectures 41-60)</h3>
                    <p>Discover the potential resources on the Moon and Mars, and how mining operations can support space colonization efforts.</p>
                </div>

                <!-- Part 5: Technical Aspects and Innovations -->
                <div class="module-card" onclick="location.href='lecture61.html'">
                    <h3>Part 5: Technical Aspects and Innovations (Lectures 61-80)</h3>
                    <p>Understand the advanced technologies that make space mining possible, including AI, robotics, refining techniques, and power systems for space operations.</p>
                </div>

                <!-- Part 6: Future of Space Mining -->
                <div class="module-card" onclick="location.href='lecture81.html'">
                    <h3>Part 6: Future of Space Mining (Lectures 81-100)</h3>
                    <p>Look into the future of space mining, including potential international collaborations, long-term sustainability, and a vision for a space-based economy.</p>
                </div>

                <!-- Bonus Module: Legal and Ethical Considerations in Space Mining -->
                <div class="module-card" onclick="location.href='lecture101.html'">
                    <h3>Bonus Module: Legal and Ethical Considerations in Space Mining</h3>
                    <p>Explore the legal framework and ethical questions surrounding space mining, including ownership rights, international policies, and sustainability.</p>
                </div>
            </section>

            <!-- Interactive Questions Section -->
            <section class="interactive-section" id="interactive-question-box">
                <h2>Interactive Questions</h2>
                <div class="interactive-question" onclick="toggleAnswer(this)">
                    <h4>What is space mining?</h4>
                </div>
                <div class="question-answer">
                    Space mining involves extracting valuable resources from celestial bodies like asteroids, the Moon, and Mars. It offers potential solutions to Earth's resource shortages.
                </div>
                <div class="interactive-question" onclick="toggleAnswer(this)">
                    <h4>How can I start a space mining startup?</h4>
                </div>
                <div class="question-answer">
                    To start a space mining startup, you need knowledge of technology, funding, and partnerships with research institutions or private space companies. Start with space geology and robotics.
                </div>
                <div class="interactive-question" onclick="toggleAnswer(this)">
                    <h4>What is asteroid mining?</h4>
                </div>
                <div class="question-answer">
                    Asteroid mining is the practice of extracting valuable minerals, water, and metals from asteroids, with immense potential for space industries.
                </div>
                <div class="interactive-question" onclick="toggleAnswer(this)">
                    <h4>How does space mining make money?</h4>
                </div>
                <div class="question-answer">
                    Space mining can generate income by extracting rare and valuable resources like platinum, which are scarce on Earth but abundant in asteroids.
                </div>
                <div class="interactive-question" onclick="toggleAnswer(this)">
                    <h4>What are the challenges of space mining?</h4>
                </div>
                <div class="question-answer">
                    Challenges include high costs, harsh space conditions, technological limitations, and the need for legal and sustainable solutions.
                </div>
                <div class="interactive-question" onclick="toggleAnswer(this)">
                    <h4>What technologies are critical for space mining?</h4>
                </div>
                <div class="question-answer">
                    Critical technologies include space robotics, AI for autonomous operations, advanced drilling and refining systems, and sustainable energy solutions like solar power.
                </div>
                <div class="interactive-question" onclick="toggleAnswer(this)">
                    <h4>Who regulates space mining activities?</h4>
                </div>
                <div class="question-answer">
                    Space mining activities are regulated by international treaties like the Outer Space Treaty of 1967, along with national space agencies and international organizations.
                </div>

                <!-- Embed Side Container -->
                <div class="embed-side-container">
                    <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.37.2/gradio.js"></script>
                    <gradio-app src="https://lixin4ever-videollama2.hf.space"></gradio-app>
                </div>
            </section>
        </div>

        <!-- Main Interactive Exploration Tool Embed at the Bottom -->
        <div class="embed-container">
            <h3>Main Interactive Exploration Tool</h3>
            <!-- First Embed -->
            <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.44.0/gradio.js"></script>
            <iframe src="https://yuntian-deng-chatgpt4.hf.space" frameborder="0"></iframe>
        </div>

        <!-- Footer -->
        <footer>
            <p>&copy; 2060 Speco Team. All rights reserved. | <a href="index.html">Back to Speco Home</a> | <a href="contact.html">Contact Us</a> | <a href="privacy.html">Privacy Policy</a></p>
        </footer>
    </div>

    <!-- JavaScript -->
    <script>
        function toggleAnswer(element) {
            const answer = element.nextElementSibling;
            if (answer.style.display === 'block') {
                answer.style.display = 'none';
            } else {
                answer.style.display = 'block';
            }
        }
    </script>
</body>
</html>