index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Reddit Slideshow</title>
    <link rel="stylesheet" href="style.css">
    
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#000000">
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

</head>
<body>
    <div id="ui-container">
        <input type="text" id="subreddit-input" placeholder="subreddit1+subreddit2">
        
        <div id="speed-controls">
            <input type="number" id="img-speed" placeholder="Img" value="5" title="Single Image Speed (sec)">
            <input type="number" id="gal-speed" placeholder="Gal" value="3" title="Gallery Image Speed (sec)">
            <input type="number" id="vid-max" placeholder="Vid" value="30" title="Video Max Limit (sec)">
        </div>

        <button id="start-btn">Load</button>
        <button id="play-pause-btn" disabled>Pause</button>
        <button id="clear-btn" title="Forget seen posts">Clear Hist</button>
    </div>

    <div id="media-container"></div>

    <div id="video-controls" class="hidden">
        <input type="range" id="video-scrub" value="0" step="0.1">
    </div>

    <div id="info-overlay">
        <h2 id="post-title"></h2>
        <p id="post-subreddit"></p>
    </div>

    <script src="app.js"></script>

    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('sw.js')
                    .then(registration => {
                        console.log('ServiceWorker registration successful');
                    })
                    .catch(err => {
                        console.error('ServiceWorker registration failed: ', err);
                    });
            });
        }
    </script>
</body>
</html>