152 lines
5.1 KiB
HTML
152 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Source for /home/jgitta/kiosk-home/index.html — copied by deploy.sh and install.sh -->
|
|
<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" id="buttonGrid"></div>
|
|
|
|
<script>
|
|
const buttons = [
|
|
{ id: 'email', label: 'Email', icon: '✉️', class: 'btn-gmail' },
|
|
{ id: 'internet', label: 'Internet', icon: '🌐', class: 'btn-browse' },
|
|
{ id: 'weather', label: 'Weather', icon: '🌤️', class: 'btn-weather' },
|
|
{ id: 'news', label: 'News', icon: '📰', class: 'btn-news' },
|
|
{ id: 'facebook', label: 'Facebook', icon: null, class: 'btn-facebook', svg: '<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>' },
|
|
{ id: 'messenger', label: 'Messenger', icon: null, class: 'btn-messenger', svg: '<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>' },
|
|
{ id: 'youtube', label: 'YouTube', icon: '▶️', class: 'btn-youtube' }
|
|
];
|
|
|
|
function loadButtons() {
|
|
const config = {};
|
|
const grid = document.getElementById('buttonGrid');
|
|
buttons.forEach(btn => {
|
|
const url = config.urls[btn.id];
|
|
const link = document.createElement('a');
|
|
link.className = `btn ${btn.class}`;
|
|
link.href = url;
|
|
|
|
const iconDiv = document.createElement('div');
|
|
iconDiv.className = 'icon';
|
|
if (btn.icon) {
|
|
iconDiv.textContent = btn.icon;
|
|
} else if (btn.svg) {
|
|
iconDiv.innerHTML = btn.svg;
|
|
}
|
|
link.appendChild(iconDiv);
|
|
|
|
const label = document.createElement('div');
|
|
label.textContent = btn.label;
|
|
link.appendChild(label);
|
|
|
|
grid.appendChild(link);
|
|
});
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
loadButtons();
|
|
updateClock();
|
|
setInterval(updateClock, 1000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|