cb01246657
Implement ambient display mode for wall-mounted tablets with: - Canvas 2D renderer (ambient_renderer.js) with 2 Hz render rate - Time-of-day palette transitions (morning/day/evening/night) - Zone outlines, portal lines, node positions, person blobs - Lerp-interpolated smooth movement (20% factor per frame) - Auto-dim after 60s of no presence in ambient zone - Alert mode with pulsing red background and acknowledge button - Morning briefing overlay (15s display after 6am) - System status indicator and time display Files: - dashboard/js/ambient_renderer.js: Canvas 2D rendering engine - dashboard/js/ambient_briefing.js: Morning briefing overlay - dashboard/js/ambient.test.js: Test suite - dashboard/css/notifications.css: Notification styles - dashboard/css/simulator.css: Simulator styles - dashboard/js/notifications.js: Notification handling - dashboard/js/simplemode.js: Simple mode logic - dashboard/simple.html: Simple mode page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
124 lines
4.9 KiB
HTML
124 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>Spaxel - Simple Mode</title>
|
|
<link rel="stylesheet" href="css/simple.css">
|
|
<link rel="stylesheet" href="css/notifications.css">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="theme-color" content="#f5f5f7">
|
|
</head>
|
|
<body class="simple-mode">
|
|
<!-- Simple Mode Header -->
|
|
<header id="simple-mode-header" class="simple-mode-header">
|
|
<h1>🏠 Spaxel</h1>
|
|
<div class="mode-toggle">
|
|
<button class="mode-toggle-btn active" data-mode="simple">Simple</button>
|
|
<button class="mode-toggle-btn" data-mode="expert">Expert</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Simple Mode Content -->
|
|
<main id="simple-mode-content" class="simple-mode-content">
|
|
<!-- Loading State -->
|
|
<div class="simple-loading">
|
|
<div class="simple-loading-spinner"></div>
|
|
<div class="simple-loading-text">Loading your home...</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Quick Actions Bottom Navigation -->
|
|
<nav id="simple-quick-actions" class="simple-quick-actions">
|
|
<div class="actions-container">
|
|
<button class="quick-action-btn active" data-action="home" data-tab="home">
|
|
<span class="action-icon">🏠</span>
|
|
<span class="action-label">Home</span>
|
|
</button>
|
|
<button class="quick-action-btn" data-action="activity" data-tab="activity">
|
|
<span class="action-icon">⏰</span>
|
|
<span class="action-label">Activity</span>
|
|
</button>
|
|
<button class="quick-action-btn" data-action="alerts" data-tab="alerts">
|
|
<span class="action-icon">🔔</span>
|
|
<span class="action-label">Alerts</span>
|
|
<span class="action-badge hidden" id="alert-badge">0</span>
|
|
</button>
|
|
<button class="quick-action-btn" data-action="settings" data-tab="settings">
|
|
<span class="action-icon">⚙</span>
|
|
<span class="action-label">Settings</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Room Detail Modal -->
|
|
<div id="simple-room-modal" class="simple-room-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<span class="modal-title">Room Details</span>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Content populated dynamically -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert Detail Modal -->
|
|
<div id="simple-alert-modal" class="simple-room-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<span class="modal-title">Alert Details</span>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Content populated dynamically -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Authentication (required for WebSocket) -->
|
|
<script src="js/auth.js"></script>
|
|
<!-- Simple Mode Detection -->
|
|
<script src="js/simplemode.js"></script>
|
|
<!-- Simple Mode -->
|
|
<script src="js/simple.js"></script>
|
|
<!-- Notifications -->
|
|
<script src="js/notifications.js"></script>
|
|
|
|
<script>
|
|
// Initialize simple mode when DOM is ready and auth is complete
|
|
(function() {
|
|
'use strict';
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check authentication first
|
|
if (window.SpaxelAuth) {
|
|
SpaxelAuth.checkStatus().then(function(isAuthenticated) {
|
|
if (isAuthenticated) {
|
|
// Initialize simple mode
|
|
if (window.SpaxelSimpleMode) {
|
|
window.SpaxelSimpleMode.init();
|
|
}
|
|
// Initialize simple mode detection
|
|
if (window.SpaxelSimpleModeDetection) {
|
|
window.SpaxelSimpleModeDetection.init();
|
|
}
|
|
} else {
|
|
// Redirect to main dashboard for authentication
|
|
window.location.href = '/';
|
|
}
|
|
}).catch(function() {
|
|
// On auth error, redirect to main dashboard
|
|
window.location.href = '/';
|
|
});
|
|
} else {
|
|
// Auth module not loaded, redirect
|
|
window.location.href = '/';
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|