add a second option "Download image (teven.dsk)" this option should download the file teven.dsk in the same directory as the html (teven.html) online
add a bit of space between the option menu and "Start Game" so that "Start Game" is not obscured by the option menu
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amstrad Game Selector</title>
    <style>
        /* Reset default margins and paddings */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Starry Background Canvas */
        #starfield {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            z-index: -2; /* Positioned behind other elements */
        }

        /* Twinkling Layer Canvas */
        #twinkling {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: -1; /* Slightly above the starfield */
            pointer-events: none; /* Allows clicks to pass through */
        }

        /* Main Content Styling */
        body {
            color: #ffffff;
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
            padding: 50px 20px;
            position: relative; /* Establishes a new stacking context */
            z-index: 1; /* Ensures content is above the canvases */
            /* Removed overflow: hidden; to allow scrolling */
        }

        /* Container for the Input Elements */
        .input-container {
            background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent dark background */
            padding: 30px 40px;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            max-width: 400px;
            margin: 0 auto; /* Center the container */
        }

        /* Heading Styling */
        .input-container h2 {
            margin-bottom: 20px;
            color: #ffcc00; /* Gold color for headings */
            text-shadow: 2px 2px 4px #000;
        }

        /* Select, Input, and Button Styling */
        select, input, button {
            display: block;
            width: 100%;
            margin: 15px 0;
            padding: 12px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
        }

        select, input {
            background-color: #333333;
            color: #ffffff;
            outline: none;
            box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
        }

        select option {
            background-color: #333333;
            color: #ffffff;
        }

        button {
            background-color: #00ff00;
            color: #000000;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }

        button:hover {
            background-color: #00e600;
            color: #ffffff;
        }

        /* Paragraph Styling (if any) */
        p {
            max-width: 800px;
            margin: 10px auto;
            line-height: 1.6;
            text-shadow: 1px 1px 2px #000;
        }

        /* Responsive Design for Tablets and Larger Smartphones */
        @media (max-width: 768px) {
            .input-container {
                padding: 25px 30px;
                max-width: 90%;
            }

            select, input, button {
                font-size: 14px;
                padding: 10px;
            }

            .input-container h2 {
                font-size: 1.5em;
            }
        }

        /* Responsive Design for Small Smartphones */
        @media (max-width: 480px) {
            .input-container {
                padding: 20px 20px;
            }

            select, input, button {
                font-size: 14px;
                padding: 8px;
            }

            .input-container h2 {
                font-size: 1.2em;
            }
        }
    </style>
</head>
<body>

    <!-- Starfield Canvas -->
    <canvas id="starfield"></canvas>

    <!-- Twinkling Canvas -->
    <canvas id="twinkling"></canvas>

    <!-- Input Container -->
    <div class="input-container">
        <h2>Select Amstrad Game</h2>
        <select id="gameSelect" onchange="updateCustomInput()">
            <option value="">-- Choose option --</option>
            <option value="run&quot;bomber">Play online (type run"teven [enter])</option>
            <!-- Add more game options as needed -->
        </select>
        <input type="text" id="customInput" placeholder="Enter custom command (e.g., run&quot;yourgame)" style="display: none;">
        <button onclick="startGame()">Start Game</button>
    </div>

    <!-- JavaScript for Functionality -->
    <script>
        function updateCustomInput() {
            var select = document.getElementById('gameSelect');
            var customInput = document.getElementById('customInput');
            if (select.value === 'custom') {
                customInput.style.display = 'block';
                customInput.focus();
            } else {
                customInput.style.display = 'none';
            }
        }

        function startGame() {
            var select = document.getElementById('gameSelect');
            var customInput = document.getElementById('customInput');
            var param1 = 'span5.dsk';  // This remains fixed as in the original code
            var param2;
            if (select.value === 'custom') {
                param2 = customInput.value;
            } else {
                param2 = select.value || 'run"bomber';  // Default to Bomber if nothing is selected
            }
            // Redirect to the game page with parameters
            window.location.href = 'index2.html?param1=' + encodeURIComponent(param1) + '&param2=' + encodeURIComponent(param2);
        }

        // Starfield and Twinkling Effect JavaScript
        // (Same as used in Teven Rides Again page)
        // Get canvas elements and their contexts
        const starfield = document.getElementById('starfield');
        const twinkling = document.getElementById('twinkling');
        const starCtx = starfield.getContext('2d');
        const twinkleCtx = twinkling.getContext('2d');

        const stars = [];
        const twinkles = [];
        const numStars = 300; // Adjust number for density

        // Define clusters with centers and radii
        const clusters = [
            { x: window.innerWidth * 0.3, y: window.innerHeight * 0.3, radius: 100 },
            { x: window.innerWidth * 0.7, y: window.innerHeight * 0.5, radius: 150 },
            { x: window.innerWidth * 0.5, y: window.innerHeight * 0.8, radius: 120 }
        ];

        // Resize Canvas to Full Screen
        function resizeCanvas() {
            starfield.width = window.innerWidth;
            starfield.height = window.innerHeight;
            twinkling.width = window.innerWidth;
            twinkling.height = window.innerHeight;
            // Recalculate clusters based on new window size
            updateClusters();
            createStars();
            createTwinkles();
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas(); // Initial call

        // Update cluster positions on resize
        function updateClusters() {
            clusters[0].x = window.innerWidth * 0.3;
            clusters[0].y = window.innerHeight * 0.3;
            clusters[1].x = window.innerWidth * 0.7;
            clusters[1].y = window.innerHeight * 0.5;
            clusters[2].x = window.innerWidth * 0.5;
            clusters[2].y = window.innerHeight * 0.8;
        }

        // Create Stars with Clustering
        function createStars() {
            stars.length = 0; // Clear existing stars
            for (let i = 0; i < numStars; i++) {
                // Determine if the star is part of a cluster or background
                const isClusterStar = Math.random() < 0.6; // 60% stars in clusters
                let x, y;

                if (isClusterStar && clusters.length > 0) {
                    // Select a random cluster
                    const cluster = clusters[Math.floor(Math.random() * clusters.length)];
                    // Place star within the cluster radius
                    const angle = Math.random() * 2 * Math.PI;
                    const distance = Math.random() * cluster.radius;
                    x = cluster.x + distance * Math.cos(angle);
                    y = cluster.y + distance * Math.sin(angle);
                } else {
                    // Background star
                    x = Math.random() * starfield.width;
                    y = Math.random() * starfield.height;
                }

                stars.push({
                    x: x,
                    y: y,
                    radius: Math.random() * 1.2,
                    alpha: Math.random(),
                    color: getRandomStarColor()
                });
            }
            drawStars();
        }

        // Function to get random star colors for variety
        function getRandomStarColor() {
            const colors = ['#ffffff', '#ffe9c4', '#d4fbff', '#e0ffff'];
            return colors[Math.floor(Math.random() * colors.length)];
        }

        // Draw Stars on Starfield Canvas
        function drawStars() {
            starCtx.clearRect(0, 0, starfield.width, starfield.height);
            stars.forEach(star => {
                starCtx.fillStyle = star.color;
                starCtx.globalAlpha = star.alpha;
                starCtx.beginPath();
                starCtx.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false);
                starCtx.fill();
                starCtx.globalAlpha = 1;
            });
        }

        // Create Twinkles (subset of stars for twinkling effect)
        function createTwinkles() {
            twinkles.length = 0; // Clear existing twinkles
            for (let i = 0; i < numStars / 2; i++) { // Approximately 150 twinkles
                const twinkleStar = stars[Math.floor(Math.random() * stars.length)];
                twinkles.push({
                    x: twinkleStar.x,
                    y: twinkleStar.y,
                    radius: twinkleStar.radius,
                    alpha: Math.random(),
                    delta: 0.02 + Math.random() * 0.01 // Twinkle speed
                });
            }
            animateTwinkles();
        }

        // Animate Twinkles on Twinkling Canvas
        function animateTwinkles() {
            twinkleCtx.clearRect(0, 0, twinkling.width, twinkling.height);
            twinkles.forEach(twinkle => {
                twinkle.alpha += twinkle.delta;
                if (twinkle.alpha >= 1 || twinkle.alpha <= 0) {
                    twinkle.delta *= -1; // Reverse direction
                }
                twinkleCtx.fillStyle = '#ffffff';
                twinkleCtx.globalAlpha = twinkle.alpha;
                twinkleCtx.beginPath();
                twinkleCtx.arc(twinkle.x, twinkle.y, twinkle.radius, 0, Math.PI * 2, false);
                twinkleCtx.fill();
                twinkleCtx.globalAlpha = 1;
            });
            requestAnimationFrame(animateTwinkles); // Loop animation
        }

        // Initialize Starfield and Twinkles
        createStars();
        createTwinkles();
    </script>
</body>
</html>