mirror of
https://github.com/ruvnet/RuView
synced 2026-06-09 10:13:17 +00:00
nai
49fb2ca9f4
* feat(ui): add keyboard shortcuts, perf monitor, toast system, theme toggle, and WCAG accessibility - Keyboard shortcuts overlay (press ? for help, 1-8 for tabs, T for theme, P for perf) - Real-time performance monitor with FPS, memory, latency sparklines (draggable) - Enhanced toast notification system with stacking, auto-dismiss, progress bars - Dark/light theme toggle with localStorage persistence and system preference detection - WCAG accessibility: skip-to-content link, ARIA roles/attributes on tabs and panels, arrow key navigation in tab bar, focus-visible outlines - ESLint config for UI directory with security and quality rules * feat(ui): add command palette, activity log, data export, fullscreen mode, connection status - Command palette (Ctrl+K / Cmd+K) with fuzzy search across tabs and actions - Activity log panel (L key) with real-time console interception, filters, resizable - Data export utility (E key) for sensor data as JSON/CSV with dialog - Fullscreen mode (F key / F11) for visualization tabs with exit button - Connection status widget in header showing WebSocket state and reconnect * feat(ui): add mobile hamburger nav, PWA support, and 40 unit tests - Mobile hamburger navigation: slide-out drawer replacing tab bar on <768px, swipe-to-close, animated hamburger icon, auto-sync with tab manager - PWA manifest + service worker: installable dashboard, offline shell caching (cache-first for static, network-first for API), auto-cleanup of old caches - 40 unit tests for ToastManager, ThemeToggle, KeyboardShortcuts, PerfMonitor, TabManager - browser-based test runner at ui/tests/unit-tests.html - PWA meta tags: theme-color, apple-mobile-web-app-capable, manifest link - Icon generator page for creating PWA icons (ui/icons/generate.html) * feat(ui): add URL routing, onboarding tour, idle detection, notification center - Hash router: tabs are bookmarkable/shareable via URL (#demo, #sensing, etc.), syncs with TabManager, supports browser back/forward navigation - Onboarding tour: interactive 6-step first-run walkthrough with spotlight highlighting, step indicators, skip/back/next controls, localStorage persistence - Idle detection: pauses health polling and reduces CSS animations after 3 min of inactivity, resumes on user interaction, integrates with Page Visibility API - Notification center: bell icon in header with unread badge, event history panel with mark-read/clear, persists across page views via sessionStorage * feat(ui): add i18n (EN/PL), screenshot tool, settings panel, reduced motion, uptime clock - i18n: English/Polish translations with auto-detection, language selector in header, data-i18n attributes on dashboard elements, localStorage persistence - Screenshot tool (S key): captures active tab to clipboard or downloads PNG, flash effect, canvas rendering with watermark, fallback for tainted canvases - Quick settings panel (gear icon): reduced motion toggle, high contrast mode, compact layout mode, health polling toggle, clear data, reset onboarding - Uptime clock: current time + session duration in header - prefers-reduced-motion: system-level and manual toggle, disables all animations and transitions for vestibular accessibility - High contrast mode: WCAG AAA compliant colors for both light and dark themes - Compact mode: condensed layout for dense information display
67 lines
1.8 KiB
HTML
67 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head><title>RuView Icon Generator</title></head>
|
|
<body>
|
|
<p>Open this file in a browser and right-click to save the canvas images as icon-192.png and icon-512.png</p>
|
|
<canvas id="c192" width="192" height="192"></canvas>
|
|
<canvas id="c512" width="512" height="512"></canvas>
|
|
<script>
|
|
function drawIcon(canvas) {
|
|
const ctx = canvas.getContext('2d');
|
|
const s = canvas.width;
|
|
// Background
|
|
ctx.fillStyle = '#1f2121';
|
|
ctx.beginPath();
|
|
ctx.roundRect(0, 0, s, s, s * 0.15);
|
|
ctx.fill();
|
|
// WiFi arcs
|
|
ctx.strokeStyle = '#32b8c6';
|
|
ctx.lineWidth = s * 0.035;
|
|
ctx.lineCap = 'round';
|
|
const cx = s * 0.5, cy = s * 0.55;
|
|
[0.35, 0.25, 0.15].forEach(r => {
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, s * r, -Math.PI * 0.75, -Math.PI * 0.25);
|
|
ctx.stroke();
|
|
});
|
|
// Center dot
|
|
ctx.fillStyle = '#32b8c6';
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, s * 0.03, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
// Person silhouette
|
|
ctx.strokeStyle = '#21808d';
|
|
ctx.lineWidth = s * 0.025;
|
|
// Head
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy - s * 0.15, s * 0.045, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
// Body
|
|
ctx.beginPath();
|
|
ctx.moveTo(cx, cy - s * 0.1);
|
|
ctx.lineTo(cx, cy + s * 0.05);
|
|
ctx.stroke();
|
|
// Arms
|
|
ctx.beginPath();
|
|
ctx.moveTo(cx - s * 0.08, cy - s * 0.04);
|
|
ctx.lineTo(cx + s * 0.08, cy - s * 0.04);
|
|
ctx.stroke();
|
|
// Legs
|
|
ctx.beginPath();
|
|
ctx.moveTo(cx, cy + s * 0.05);
|
|
ctx.lineTo(cx - s * 0.06, cy + s * 0.15);
|
|
ctx.moveTo(cx, cy + s * 0.05);
|
|
ctx.lineTo(cx + s * 0.06, cy + s * 0.15);
|
|
ctx.stroke();
|
|
// Text
|
|
ctx.fillStyle = '#f5f5f5';
|
|
ctx.font = `bold ${s * 0.08}px sans-serif`;
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('RuView', cx, s * 0.88);
|
|
}
|
|
drawIcon(document.getElementById('c192'));
|
|
drawIcon(document.getElementById('c512'));
|
|
</script>
|
|
</body>
|
|
</html>
|