preseed/tampermonkey/backtohome.js

122 lines
3.9 KiB
JavaScript

// ==UserScript==
// @name Back to Home (39C3 Kiosk)
// @namespace http://tampermonkey.net/
// @version 2025-12-18
// @description Adds buttons to every website to return to home page and prompts on idle
// @author You
// @match *://*/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=google.com
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
const btn = document.createElement('button');
btn.textContent = 'Home';
btn.style.cssText = ' all: unset; box-sizing: border-box; border: 2px solid #141414; background: #faf5f5; text-align: center; color: #141414; position: fixed; right: 10px; bottom: 10px; width: 60px; height: 60px; z-index: 2147483647; padding-top: 6px; border-radius: 60px;';
btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house-icon lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>';
btn.addEventListener('click', () => {
window.location.href = 'http://127.0.0.1:8080';
});
(document.body || document.documentElement).appendChild(btn);
const IDLE_LIMIT_MS = 30_000; // 30 seconds
let idleTimer = null;
let promptVisible = false;
const modal = document.createElement('div');
modal.id = 'idle-modal';
modal.hidden = true;
modal.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #141414 !important;
border-radius: 0.385em;
border: 2px solid #444;
padding: 20px;
z-index: 2147483647;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
`;
modal.innerHTML = `
<h2>You seem to be idle</h2>
<p>Do you want to stay on this page or go back to the home page?</p>
<button id="idle-stay">Stay</button>
<button id="idle-go">Go to Home</button>
`;
document.body.appendChild(modal);
const backdrop = document.createElement('div');
backdrop.id = 'idle-backdrop';
backdrop.hidden = true;
backdrop.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 2147483646;
`;
document.body.appendChild(backdrop);
const userEvents = [
'mousemove',
'mousedown',
'keydown',
'wheel',
'touchstart',
'scroll'
];
function showPrompt() {
promptVisible = true;
modal.hidden = false;
backdrop.hidden = false;
debugger;
// Move focus to the primary action for accessibility
document.querySelector("#idle-stay").addEventListener("click", () => {
hidePrompt();
resetIdleTimer();
});
document.querySelector("#idle-go").addEventListener("click", () => {
window.location.href = 'https://www.google.com';
});
}
function hidePrompt() {
promptVisible = false;
modal.hidden = true;
backdrop.hidden = true;
}
function onIdle() {
showPrompt();
}
function resetIdleTimer() {
if (promptVisible) return; // Don't auto-dismiss while prompt is visible
if (idleTimer) clearTimeout(idleTimer);
idleTimer = setTimeout(onIdle, IDLE_LIMIT_MS);
}
// Any user activity resets the timer
userEvents.forEach(evt => {
document.addEventListener(evt, resetIdleTimer, { passive: true });
});
// When returning to a visible tab, refresh the timer
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
resetIdleTimer();
}
});
// Actions
// Kick things off
resetIdleTimer();
})();