import os

# Directory containing your PNG images
png_folder = './DS'

# Get all the PNG files in the folder
png_files = sorted([f for f in os.listdir(png_folder) if f.endswith('.png')])

# Generate HTML code
html_code = f"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All event DS </title>
    <style>
        body {{
            font-family: Arial, sans-serif;
            text-align: center;
        }}
        #movie {{
            width: 80%;
            max-width: 800px;
        }}
        .controls {{
            margin: 20px;
        }}
        .btn {{
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }}
    </style>
</head>
<body>
    <h1 style="font-weight: bold; text-align: center;">Events without SEP</h1>
    <div>
        <img id="movie" src="{png_folder}/{png_files[0]}" alt="Movie Frame" />
    </div>
    <div class="controls">
        <button class="btn" id="prevBtn">Backward</button>
        <button class="btn" id="playPauseBtn">Play</button>
        <button class="btn" id="nextBtn">Forward</button>
        <br><br>
        <label for="frameRate">Frame Rate:</label>
        <input type="range" id="frameRate" min="1" max="100" value="10" />
    </div>

    <script>
        const pngFiles = {png_files};
        let currentIndex = 0;
        let isPlaying = false;
        let intervalId;

        const movie = document.getElementById("movie");
        const playPauseBtn = document.getElementById("playPauseBtn");
        const prevBtn = document.getElementById("prevBtn");
        const nextBtn = document.getElementById("nextBtn");
        const frameRateInput = document.getElementById("frameRate");

        const updateImage = () => {{
            movie.src = "{png_folder}/" + pngFiles[currentIndex];
        }};

        const togglePlayPause = () => {{
            if (isPlaying) {{
                clearInterval(intervalId);
                playPauseBtn.innerText = "Play";
            }} else {{
                intervalId = setInterval(() => {{
                    currentIndex = (currentIndex + 1) % pngFiles.length;
                    updateImage();
                }}, 1000 / frameRateInput.value);
                playPauseBtn.innerText = "Pause";
            }}
            isPlaying = !isPlaying;
        }};

        const goForward = () => {{
            currentIndex = (currentIndex + 1) % pngFiles.length;
            updateImage();
        }};

        const goBackward = () => {{
            currentIndex = (currentIndex - 1 + pngFiles.length) % pngFiles.length;
            updateImage();
        }};

        prevBtn.onclick = goBackward;
        nextBtn.onclick = goForward;
        playPauseBtn.onclick = togglePlayPause;
        frameRateInput.oninput = () => {{
            if (isPlaying) {{
                clearInterval(intervalId);
                togglePlayPause();
            }}
        }};
    </script>
</body>
</html>
"""

# Save the HTML content to a file
with open("All_event_DSs.html", "w") as file:
    file.write(html_code)

print("HTML file 'All_events_DSs.html' generated successfully.")
