index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Falling Sakura</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="images/sakura.png">
</head>
<body>
    <div class="switch-container">
        <label class="switch">
            <input type="checkbox" id="modeSwitch">
            <span class="slider"></span>
        </label>
    </div>
    <div class="background">
        <div class="particles layer" id="layer1"></div>
        <div class="particles layer" id="layer2"></div>
    </div>
    <script>
        // Request permission for device orientation on iOS 13+ devices
        if (window.DeviceOrientationEvent && typeof DeviceOrientationEvent.requestPermission === 'function') {
            DeviceOrientationEvent.requestPermission()
                .then(permissionState => {
                    if (permissionState === 'granted') {
                        // Add the device orientation event listener
                        window.addEventListener('deviceorientation', handleOrientation, true);
                    }
                })
                .catch(console.error);
        }
    </script>
    <script src="scripts.js"></script>
</body>
</html>