<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイムラプススライドショー</title>
    <style>
        #slideshow {
            width: 100%;
            height: auto;
            position: relative;
        }
        #slideshow img {
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s;
        }
        #slideshow img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="slideshow"></div>
    <script>
        const folderPath = '/media/evodge-kon/ssd1_128G/html/home/images/'; // 画像フォルダのパスをここで設定
        const imageFiles = [
            '2025-02-23_06-00-00.jpg',
            '2025-02-23_08-00-00.jpg',
            // 他の日付のファイルも追加
        ];
        const slideshow = document.getElementById('slideshow');

        imageFiles.forEach((file, index) => {
            const img = document.createElement('img');
            img.src = `${folderPath}${file}`;
            if (index === 0) img.classList.add('active');
            slideshow.appendChild(img);
        });

        let currentIndex = 0;
        const images = document.querySelectorAll('#slideshow img');

        function showNextImage() {
            images[currentIndex].classList.remove('active');
            currentIndex = (currentIndex + 1) % imageFiles.length;
            images[currentIndex].classList.add('active');
        }

        setInterval(showNextImage, 1000); // 1秒ごとに画像を切り替え
    </script>
</body>
</html>
"""

with open("tmlaps.html", "w", encoding="utf-8") as file:
    file.write(html_content)

print("tmlaps.html ファイルが作成されました。")
