make it so the user can slow down and speed up the ROM and flash games with only frames

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CLIFF EMULATOR</title>
    <!-- Google Fonts for Enhanced Typography -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

    <!-- Include Ruffle for SWF support -->
    <script src="https://unpkg.com/@ruffle-rs/ruffle"></script>

    <style>
        /* Reset default margins and paddings */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Base Styles */
        html, body {
            height: 100%;
            font-family: 'Roboto', Arial, sans-serif;
            display: flex;
            flex-direction: column;
            background-color: #121212;
            color: #e0e0e0;
        }

        /* Header Styling */
        #header {
            padding: 20px;
            background-color: #1e1e1e;
            color: #ffffff;
            text-align: center;
            flex: 0 0 auto;
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        #header h1 {
            font-size: 2.5em;
            letter-spacing: 2px;
        }

        /* File Selector Styling */
        #fileSelector {
            padding: 15px 20px;
            background-color: #1e1e1e;
            text-align: center;
            flex: 0 0 auto;
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
            position: relative; /* Added for positioning the fullscreen button */
        }

        /* Custom File Input */
        .custom-file-input {
            position: relative;
            display: inline-block;
            overflow: hidden;
            cursor: pointer;
            background-color: #2c2c2c;
            color: #e0e0e0;
            padding: 12px 24px;
            border: 2px solid #444;
            border-radius: 5px;
            transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
            font-size: 16px;
            font-weight: 500;
        }

        .custom-file-input:hover {
            background-color: #3a3a3a;
            border-color: #666;
        }

        .custom-file-input:active {
            transform: scale(0.98);
        }

        /* Hide the actual file input */
        .custom-file-input input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        /* Emulator Container Styling */
        #gameContainer {
            flex: 1 1 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #121212;
            overflow: hidden;
            position: relative;
            padding: 20px;
        }

        /* Emulator Canvas Styling */
        #game {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            background-color: #000;
            border: 4px solid #333;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0,0,0,0.7);
            position: relative; /* Necessary for positioning the fullscreen button */
        }

        /* Fullscreen Button Styling */
        #fullscreenButton {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(44, 44, 44, 0.8);
            color: #e0e0e0;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: none; /* Hidden by default */
            transition: background-color 0.3s, transform 0.2s;
            z-index: 10; /* Ensure it's above other elements */
        }

        #fullscreenButton:hover {
            background-color: rgba(58, 58, 58, 0.9);
        }

        #fullscreenButton:active {
            transform: scale(0.95);
        }

        /* Optional Footer Styling */
        #footer {
            padding: 10px 20px;
            background-color: #1e1e1e;
            color: #888;
            text-align: center;
            flex: 0 0 auto;
            font-size: 0.9em;
        }

        /* Responsive Adjustments */
        @media (max-width: 600px) {
            #header h1 {
                font-size: 1.8em;
            }

            .custom-file-input {
                width: 100%;
                text-align: center;
            }

            #game {
                border-width: 2px;
            }

            #fullscreenButton {
                padding: 6px 10px;
                font-size: 12px;
            }
        }

        /* Smooth Transition for Theme Elements */
        body, #header, #fileSelector, .custom-file-input, #gameContainer, #game, #fullscreenButton {
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        }
    </style>
</head>
<body>
    <!-- Header Section -->
    <div id="header">
        <h1>CLIFF EMULATOR</h1>
    </div>

    <!-- File Selector Section -->
    <div id="fileSelector">
        <label class="custom-file-input">
            Insert Game
            <input type="file" id="fileInput" accept=".nes, .smc, .sfc, .gba, .gb, .gbc, .nds, .z64, .swf" />
        </label>
    </div>

    <!-- Emulator Container -->
    <div id="gameContainer">
        <div id="game"></div>
        <!-- Fullscreen Button -->
        <button id="fullscreenButton">Fullscreen</button>
    </div>

    <!-- Optional Footer -->
    <div id="footer">
        &copy; 2024 CLIFF EMULATOR. All rights reserved.
    </div>

    <script>
        // Function to initialize EmulatorJS with selected game data
        function initializeEmulator(core, gameName, gameData) {
            // Set EmulatorJS configuration based on the selected core
            window.EJS_player = "#game"; // The DOM element to embed the emulator
            window.EJS_core = core; // Core emulator type 
            window.EJS_gameName = gameName || (core.toUpperCase() + " Game"); // Game name
            window.EJS_color = "#0064ff"; // Theme color
            window.EJS_pathtodata = "https://cdn.emulatorjs.org/stable/data/"; // Path to EmulatorJS data

            // Create a Blob URL for the game data
            window.EJS_gameUrl = URL.createObjectURL(new Blob([gameData]));

            // Remove existing loader.js if it exists to allow reinitialization
            const existingLoader = document.querySelector('script[data-loader="emulatorjs"]');
            if (existingLoader) {
                existingLoader.remove();
            }

            // Create a new script element for loader.js
            const loaderScript = document.createElement('script');
            loaderScript.src = "https://cdn.emulatorjs.org/stable/data/loader.js";
            loaderScript.setAttribute('data-loader', 'emulatorjs'); // Mark the script for future reference
            document.body.appendChild(loaderScript);

            // Hide the fullscreen button as EmulatorJS doesn't use it
            toggleFullscreenButton(false);
        }

        // Function to toggle fullscreen button visibility
        function toggleFullscreenButton(show) {
            const fullscreenButton = document.getElementById('fullscreenButton');
            if (show) {
                fullscreenButton.style.display = 'block';
            } else {
                fullscreenButton.style.display = 'none';
            }
        }

        // Handle file selection
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (!file) {
                alert("No file selected.");
                return;
            }

            // Determine the file extension
            const fileName = file.name;
            const fileExtension = fileName.split('.').pop().toLowerCase();

            let core;
            if (fileExtension === 'nes') {
                core = 'nes';
            } else if (fileExtension === 'smc' || fileExtension === 'sfc') {
                core = 'snes';
            } else if (fileExtension === 'gba' || fileExtension === 'gb' || fileExtension === 'gbc' ) {
                core = 'gba';
            } else if (fileExtension === 'nds') {
                core = 'nds';
            } else if (fileExtension === 'z64') {
                core = 'n64';
            } else if (fileExtension === 'swf') {
                // Handle SWF files using Ruffle
                const reader = new FileReader();

                reader.onload = function(e) {
                    const arrayBuffer = e.target.result;

                    // Initialize Ruffle
                    const ruffle = window.RufflePlayer.newest();
                    const player = ruffle.createPlayer();

                    // Clear the #game element
                    const gameContainer = document.getElementById('game');
                    gameContainer.innerHTML = '';

                    // Append the player to the #game element
                    gameContainer.appendChild(player);

                    // Load the SWF data
                    player.load({ data: arrayBuffer });

                    // Make sure Ruffle player stretches to fit
                    player.style.width = '100%';
                    player.style.height = '100%';

                    // Show the fullscreen button
                    toggleFullscreenButton(true);

                    // Attach fullscreen functionality to the button
                    const fullscreenButton = document.getElementById('fullscreenButton');
                    fullscreenButton.onclick = function() {
                        toggleFullScreen(gameContainer);
                    };
                };

                reader.onerror = function() {
                    alert("Failed to read the SWF file.");
                };

                // Read the file as an ArrayBuffer
                reader.readAsArrayBuffer(file);
                return; // Exit the function since we don't need to use EmulatorJS
            } else {
                alert("Please select a valid game file.");
                return;
            }

            // For non-SWF files, initialize EmulatorJS
            const reader = new FileReader();

            reader.onload = function(e) {
                const arrayBuffer = e.target.result;
                const gameData = new Uint8Array(arrayBuffer);

                // Initialize the emulator with the selected game and core
                initializeEmulator(core, fileName, gameData);
            };

            reader.onerror = function() {
                alert("Failed to read the file.");
            };

            // Read the file as an ArrayBuffer
            reader.readAsArrayBuffer(file);
        });

        // Function to toggle fullscreen mode
        function toggleFullScreen(element) {
            if (!document.fullscreenElement) {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullscreen) { /* Safari */
                    element.webkitRequestFullscreen();
                } else if (element.msRequestFullscreen) { /* IE11 */
                    element.msRequestFullscreen();
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
            }
        }

        // Optional: Handle exiting fullscreen to reset styles if needed
        document.addEventListener('fullscreenchange', (event) => {
            const gameContainer = document.getElementById('gameContainer');
            if (!document.fullscreenElement) {
                // Exited fullscreen

            }
        });
    </script>
</body>
</html>