Initial release v0.01 — SeniorNet kiosk browser
- PyQt5 floating toolbar (Back, Forward, HOME, Bookmarks) over Google Chrome - Scrollable bookmarks bar with nested folder dropdown menus - Chrome DevTools Protocol (CDP) for navigation control - Home screen with large senior-friendly buttons (Gmail, Google, Weather, News, Facebook, Messenger, YouTube) - Automatic GPU/ML cache cleanup on every Chrome launch - Kiosk hardening: TTY switching blocked, keyboard shortcuts intercepted, auto-restart on crash - System config files and install script included
This commit is contained in:
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Home</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f0f4f8;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#clock {
|
||||
font-size: 52px;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
#date {
|
||||
font-size: 28px;
|
||||
color: #555;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
max-width: 1100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px 16px;
|
||||
border-radius: 24px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
|
||||
transition: transform 0.1s, box-shadow 0.1s;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 28px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
.btn img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.btn-gmail { background: linear-gradient(135deg, #ea4335, #c5221f); }
|
||||
.btn-browse { background: linear-gradient(135deg, #4285f4, #1a73e8); }
|
||||
.btn-weather { background: linear-gradient(135deg, #00bcd4, #0097a7); }
|
||||
.btn-news { background: linear-gradient(135deg, #ff7043, #e64a19); }
|
||||
.btn-facebook { background: linear-gradient(135deg, #1877f2, #0d5dbf); }
|
||||
.btn-messenger { background: linear-gradient(135deg, #00b2ff, #0078d4); }
|
||||
.btn-youtube { background: linear-gradient(135deg, #ff0000, #cc0000); }
|
||||
|
||||
.icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="clock">12:00 PM</div>
|
||||
<div id="date">Wednesday, January 1</div>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<a class="btn btn-gmail" href="https://mail.google.com">
|
||||
<div class="icon">✉️</div>
|
||||
Email
|
||||
</a>
|
||||
|
||||
<a class="btn btn-browse" href="https://www.google.com">
|
||||
<div class="icon">🌐</div>
|
||||
Internet
|
||||
</a>
|
||||
|
||||
<a class="btn btn-weather" href="https://weather.com">
|
||||
<div class="icon">🌤️</div>
|
||||
Weather
|
||||
</a>
|
||||
|
||||
<a class="btn btn-news" href="https://news.google.com">
|
||||
<div class="icon">📰</div>
|
||||
News
|
||||
</a>
|
||||
|
||||
<a class="btn btn-facebook" href="https://www.facebook.com">
|
||||
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="54" height="54" fill="white"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg></div>
|
||||
Facebook
|
||||
</a>
|
||||
|
||||
<a class="btn btn-messenger" href="https://www.messenger.com">
|
||||
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="54" height="54" fill="white"><path d="M256.55 8C116.52 8 8 110.34 8 248.57c0 72.3 29.71 134.78 78.07 177.94 8.35 7.51 6.63 11.86 8.05 58.23A19.92 19.92 0 0 0 122 502.31c52.91-23.3 53.59-25.14 62.56-22.7C337.85 521.8 504 423.7 504 248.57 504 110.34 396.59 8 256.55 8zm149.24 185.13l-73 115.57a37.37 37.37 0 0 1-53.91 9.93l-58.08-43.47a15 15 0 0 0-18 0l-78.37 59.44c-10.46 7.93-24.16-4.6-17.11-15.67l73-115.57a37.36 37.36 0 0 1 53.91-9.93l58.06 43.46a15 15 0 0 0 18 0l78.34-59.44c10.48-7.93 24.17 4.6 17.12 15.67z"/></svg></div>
|
||||
Messenger
|
||||
</a>
|
||||
|
||||
<a class="btn btn-youtube" href="https://www.youtube.com">
|
||||
<div class="icon">▶️</div>
|
||||
YouTube
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
const timeOpts = { hour: 'numeric', minute: '2-digit', hour12: true };
|
||||
const dateOpts = { weekday: 'long', month: 'long', day: 'numeric' };
|
||||
document.getElementById('clock').textContent = now.toLocaleTimeString('en-US', timeOpts);
|
||||
document.getElementById('date').textContent = now.toLocaleDateString('en-US', dateOpts);
|
||||
}
|
||||
updateClock();
|
||||
setInterval(updateClock, 1000);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user