Cooking Mode toggle - the best way to keep your screen awake is by using the Web Wake Lock API.

README.md

Cooking Mode Toggle

The best way to keep your screen awake is by using the Web Wake Lock API.

To keep this "minimalist," we will use a small script that only runs when the user toggles a button.

SEO and Accessibility Considerations

HTML Semantics: Use a <label> properly associated with the <input type="checkbox"> so screen readers know what the toggle does.

Performance: Since this is a for static site, I recommend wrapping the JavaScript in a check or only loading it on recipe pages to keep your "minimal JS" philosophy intact.

Browser Support: Modern versions of Chrome, Edge, and Safari support the Wake Lock API. If the user is on an ancient browser, the try...catch block ensures nothing breaks; the screen will simply behave as normal.

Meta Description Suggestion

If you are adding a section about this feature to your "About" or "Help" page:

"Enjoy a seamless cooking experience with our new 'Cooking Mode'. Toggle it on to keep your screen awake while following recipes, so you never have to touch your phone with messy hands again." (189 characters)

cookingmode.html

<div class="cooking-mode-container">
    <label class="switch">
        <input type="checkbox" id="wakeLockCheckbox">
        <span class="slider"></span>
    </label>
    <span>Cooking Mode (Keep Screen On)</span>
    <small id="wakeLockStatus"></small>
</div>

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

cookingmode.js

let wakeLock = null;

const checkbox = document.getElementById('wakeLockCheckbox');
const statusLabel = document.getElementById('wakeLockStatus');

// Function to request the lock
const requestWakeLock = async () => {
    try {
        wakeLock = await navigator.wakeLock.request('screen');
        statusLabel.textContent = "(Active)";
        
        // Listen for when the lock is released (e.g. if user switches tabs)
        wakeLock.addEventListener('release', () => {
            console.log('Wake Lock was released');
        });
    } catch (err) {
        statusLabel.textContent = "(Not supported)";
        console.error(`${err.name}, ${err.message}`);
    }
};

// Toggle logic
checkbox.addEventListener('change', async () => {
    if (checkbox.checked) {
        await requestWakeLock();
    } else {
        if (wakeLock !== null) {
            wakeLock.release();
            wakeLock = null;
            statusLabel.textContent = "";
        }
    }
});

// Re-active if user tabbed away and came back
document.addEventListener('visibilitychange', async () => {
    if (wakeLock !== null && document.visibilityState === 'visible') {
        await requestWakeLock();
    }
});

style.css

.cooking-mode-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

/* Basic Toggle Switch Styling */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px; width: 14px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider { background-color: #2ecc71; }
input:checked + .slider:before { transform: translateX(20px); }