jknapp
6f3823eccf
- Add wake lock (keep screen awake) functionality - Add fullscreen toggle button - Add dynamic PWA manifest generation - Add favicon and icons for all relay pages - Copy icons from main web folder 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
622 lines
22 KiB
HTML
622 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<meta name="theme-color" content="#007acc">
|
|
<meta name="description" content="Remote macro control for your desktop">
|
|
|
|
<!-- PWA / iOS specific -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="MacroPad">
|
|
|
|
<title>MacroPad</title>
|
|
|
|
<!-- PWA manifest will be dynamically set -->
|
|
<link rel="manifest" id="manifest-link">
|
|
<link rel="icon" type="image/png" href="/static/icons/favicon.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/static/icons/icon-192.png">
|
|
<link rel="apple-touch-icon" href="/static/icons/icon-192.png">
|
|
|
|
<style>
|
|
:root {
|
|
--bg-color: #2e2e2e;
|
|
--fg-color: #ffffff;
|
|
--highlight-color: #3e3e3e;
|
|
--accent-color: #007acc;
|
|
--button-bg: #505050;
|
|
--button-hover: #606060;
|
|
--tab-bg: #404040;
|
|
--tab-selected: #007acc;
|
|
--danger-color: #dc3545;
|
|
--success-color: #28a745;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--fg-color);
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
.header {
|
|
background-color: var(--highlight-color);
|
|
padding: 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header h1 { font-size: 1.5rem; }
|
|
|
|
.header-actions { display: flex; gap: 0.5rem; align-items: center; }
|
|
|
|
.connection-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.8rem;
|
|
color: #aaa;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--danger-color);
|
|
}
|
|
|
|
.status-dot.connected { background: var(--success-color); }
|
|
|
|
.header-btn {
|
|
background: var(--button-bg);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header-btn:hover { background: var(--button-hover); }
|
|
|
|
.header-btn.icon-btn {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.wake-lock-status {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.wake-lock-status:hover { background: var(--button-bg); }
|
|
.wake-lock-status.active .wake-icon { color: var(--success-color); }
|
|
.wake-lock-status.unsupported { opacity: 0.3; cursor: default; }
|
|
.wake-lock-status.unsupported .wake-icon { color: #888; text-decoration: line-through; }
|
|
|
|
.wake-icon {
|
|
font-size: 1.2rem;
|
|
color: #888;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
padding: 0.5rem 1rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tab {
|
|
background: var(--tab-bg);
|
|
color: var(--fg-color);
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tab:hover { background: var(--button-hover); }
|
|
.tab.active { background: var(--tab-selected); }
|
|
|
|
.macro-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.macro-card {
|
|
background: var(--button-bg);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: transform 0.1s, background 0.2s;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.macro-card:hover { background: var(--button-hover); transform: translateY(-2px); }
|
|
.macro-card:active { transform: translateY(0); }
|
|
|
|
.macro-card.executing {
|
|
animation: pulse 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(0.95); background: var(--accent-color); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.macro-image {
|
|
width: 64px;
|
|
height: 64px;
|
|
object-fit: contain;
|
|
margin-bottom: 0.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.macro-image-placeholder {
|
|
width: 64px;
|
|
height: 64px;
|
|
background: var(--highlight-color);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.macro-name {
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 3rem 1rem;
|
|
color: #888;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.toast-container {
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
z-index: 300;
|
|
}
|
|
|
|
.toast {
|
|
background: var(--highlight-color);
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 4px;
|
|
margin-top: 0.5rem;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
.toast.success { border-left: 4px solid var(--success-color); }
|
|
.toast.error { border-left: 4px solid var(--danger-color); }
|
|
|
|
@keyframes slideIn {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
.loading {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid var(--button-bg);
|
|
border-top-color: var(--accent-color);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.offline-banner {
|
|
background: var(--danger-color);
|
|
color: white;
|
|
text-align: center;
|
|
padding: 0.5rem;
|
|
display: none;
|
|
}
|
|
|
|
.offline-banner.visible { display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="offline-banner" id="offline-banner">
|
|
Desktop is offline - waiting for reconnection...
|
|
</div>
|
|
|
|
<header class="header">
|
|
<h1>MacroPad</h1>
|
|
<div class="header-actions">
|
|
<div class="connection-status">
|
|
<div class="status-dot"></div>
|
|
<span>Connecting...</span>
|
|
</div>
|
|
<div class="wake-lock-status" id="wake-lock-status" title="Screen wake lock">
|
|
<span class="wake-icon">☀</span>
|
|
</div>
|
|
<button class="header-btn icon-btn" onclick="app.toggleFullscreen()" title="Toggle fullscreen">⛶</button>
|
|
<button class="header-btn" onclick="app.refresh()">Refresh</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="tabs" id="tabs-container"></nav>
|
|
|
|
<main class="macro-grid" id="macro-grid">
|
|
<div class="loading"><div class="spinner"></div></div>
|
|
</main>
|
|
|
|
<div class="toast-container" id="toast-container"></div>
|
|
|
|
<script>
|
|
// Inline MacroPad App for Relay Mode
|
|
class MacroPadApp {
|
|
constructor() {
|
|
this.macros = {};
|
|
this.tabs = [];
|
|
this.currentTab = 'All';
|
|
this.ws = null;
|
|
this.desktopConnected = false;
|
|
this.wsAuthenticated = false;
|
|
|
|
// Get session ID from URL
|
|
const pathMatch = window.location.pathname.match(/^\/([a-zA-Z0-9]+)/);
|
|
this.sessionId = pathMatch ? pathMatch[1] : null;
|
|
|
|
// Get password from URL or sessionStorage
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
this.password = urlParams.get('auth') || sessionStorage.getItem(`macropad_${this.sessionId}`);
|
|
|
|
if (this.password) {
|
|
sessionStorage.setItem(`macropad_${this.sessionId}`, this.password);
|
|
if (urlParams.has('auth')) {
|
|
window.history.replaceState({}, '', window.location.pathname);
|
|
}
|
|
}
|
|
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
this.wakeLock = null;
|
|
this.wakeLockEnabled = false;
|
|
|
|
this.setupPWA();
|
|
this.setupWebSocket();
|
|
this.setupEventListeners();
|
|
this.setupWakeLock();
|
|
}
|
|
|
|
getApiHeaders() {
|
|
return {
|
|
'Content-Type': 'application/json',
|
|
'X-MacroPad-Password': this.password || ''
|
|
};
|
|
}
|
|
|
|
async loadTabs() {
|
|
try {
|
|
const response = await fetch(`/${this.sessionId}/api/tabs`, {
|
|
headers: this.getApiHeaders()
|
|
});
|
|
if (response.status === 401) return this.handleAuthError();
|
|
if (response.status === 503) return this.handleDesktopOffline();
|
|
const data = await response.json();
|
|
this.tabs = data.tabs || [];
|
|
this.renderTabs();
|
|
} catch (error) {
|
|
console.error('Error loading tabs:', error);
|
|
}
|
|
}
|
|
|
|
async loadMacros() {
|
|
try {
|
|
const path = this.currentTab === 'All' ? '/api/macros' : `/api/macros/${encodeURIComponent(this.currentTab)}`;
|
|
const response = await fetch(`/${this.sessionId}${path}`, {
|
|
headers: this.getApiHeaders()
|
|
});
|
|
if (response.status === 401) return this.handleAuthError();
|
|
if (response.status === 503) return this.handleDesktopOffline();
|
|
const data = await response.json();
|
|
this.macros = data.macros || {};
|
|
this.renderMacros();
|
|
} catch (error) {
|
|
console.error('Error loading macros:', error);
|
|
}
|
|
}
|
|
|
|
async executeMacro(macroId) {
|
|
const card = document.querySelector(`[data-macro-id="${macroId}"]`);
|
|
if (card) card.classList.add('executing');
|
|
|
|
try {
|
|
const response = await fetch(`/${this.sessionId}/api/execute`, {
|
|
method: 'POST',
|
|
headers: this.getApiHeaders(),
|
|
body: JSON.stringify({ macro_id: macroId })
|
|
});
|
|
if (!response.ok) throw new Error('Failed');
|
|
} catch (error) {
|
|
this.showToast('Execution failed', 'error');
|
|
}
|
|
|
|
setTimeout(() => card?.classList.remove('executing'), 300);
|
|
}
|
|
|
|
handleAuthError() {
|
|
sessionStorage.removeItem(`macropad_${this.sessionId}`);
|
|
window.location.href = `/${this.sessionId}`;
|
|
}
|
|
|
|
handleDesktopOffline() {
|
|
this.desktopConnected = false;
|
|
this.updateConnectionStatus(false);
|
|
document.getElementById('offline-banner').classList.add('visible');
|
|
}
|
|
|
|
setupWebSocket() {
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsUrl = `${protocol}//${window.location.host}/${this.sessionId}/ws`;
|
|
|
|
this.ws = new WebSocket(wsUrl);
|
|
|
|
this.ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
this.handleMessage(data);
|
|
};
|
|
|
|
this.ws.onclose = () => {
|
|
this.wsAuthenticated = false;
|
|
this.updateConnectionStatus(false);
|
|
setTimeout(() => this.setupWebSocket(), 3000);
|
|
};
|
|
|
|
this.ws.onerror = () => this.updateConnectionStatus(false);
|
|
}
|
|
|
|
handleMessage(data) {
|
|
switch (data.type) {
|
|
case 'auth_required':
|
|
if (this.password) {
|
|
this.ws.send(JSON.stringify({ type: 'auth', password: this.password }));
|
|
}
|
|
break;
|
|
case 'auth_response':
|
|
if (data.success) {
|
|
this.wsAuthenticated = true;
|
|
this.updateConnectionStatus(this.desktopConnected);
|
|
} else {
|
|
this.handleAuthError();
|
|
}
|
|
break;
|
|
case 'desktop_status':
|
|
this.desktopConnected = data.status === 'connected';
|
|
this.updateConnectionStatus(this.desktopConnected);
|
|
document.getElementById('offline-banner').classList.toggle('visible', !this.desktopConnected);
|
|
if (this.desktopConnected) {
|
|
this.loadTabs();
|
|
this.loadMacros();
|
|
}
|
|
break;
|
|
case 'macro_created':
|
|
case 'macro_updated':
|
|
case 'macro_deleted':
|
|
this.loadTabs();
|
|
this.loadMacros();
|
|
break;
|
|
case 'executed':
|
|
const card = document.querySelector(`[data-macro-id="${data.macro_id}"]`);
|
|
if (card) {
|
|
card.classList.add('executing');
|
|
setTimeout(() => card.classList.remove('executing'), 300);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
updateConnectionStatus(connected) {
|
|
const dot = document.querySelector('.status-dot');
|
|
const text = document.querySelector('.connection-status span');
|
|
if (dot) dot.classList.toggle('connected', connected);
|
|
if (text) text.textContent = connected ? 'Connected' : 'Disconnected';
|
|
}
|
|
|
|
renderTabs() {
|
|
const container = document.getElementById('tabs-container');
|
|
container.innerHTML = this.tabs.map(tab => `
|
|
<button class="tab ${tab === this.currentTab ? 'active' : ''}" data-tab="${tab}">${tab}</button>
|
|
`).join('');
|
|
}
|
|
|
|
renderMacros() {
|
|
const container = document.getElementById('macro-grid');
|
|
const entries = Object.entries(this.macros);
|
|
|
|
if (entries.length === 0) {
|
|
container.innerHTML = '<div class="empty-state"><p>No macros found</p></div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = entries.map(([id, macro]) => {
|
|
// Include password as query param for image authentication
|
|
const imageSrc = macro.image_path
|
|
? `/${this.sessionId}/api/image/${macro.image_path}?password=${encodeURIComponent(this.password)}`
|
|
: null;
|
|
const firstChar = macro.name.charAt(0).toUpperCase();
|
|
return `
|
|
<div class="macro-card" data-macro-id="${id}" onclick="app.executeMacro('${id}')">
|
|
${imageSrc ? `<img src="${imageSrc}" class="macro-image" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">` : ''}
|
|
<div class="macro-image-placeholder" ${imageSrc ? 'style="display:none"' : ''}>${firstChar}</div>
|
|
<span class="macro-name">${macro.name}</span>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
setupEventListeners() {
|
|
document.getElementById('tabs-container').addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('tab')) {
|
|
this.currentTab = e.target.dataset.tab;
|
|
this.renderTabs();
|
|
this.loadMacros();
|
|
}
|
|
});
|
|
}
|
|
|
|
showToast(message, type = 'info') {
|
|
const container = document.getElementById('toast-container');
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${type}`;
|
|
toast.textContent = message;
|
|
container.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 3000);
|
|
}
|
|
|
|
refresh() {
|
|
this.loadTabs();
|
|
this.loadMacros();
|
|
}
|
|
|
|
// Fullscreen
|
|
toggleFullscreen() {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen().catch(err => {
|
|
console.log('Fullscreen error:', err);
|
|
});
|
|
} else {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
// Wake Lock
|
|
async setupWakeLock() {
|
|
const status = document.getElementById('wake-lock-status');
|
|
|
|
if (!('wakeLock' in navigator)) {
|
|
console.log('Wake Lock API not supported');
|
|
if (status) {
|
|
status.classList.add('unsupported');
|
|
status.title = 'Wake lock not available (requires HTTPS)';
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (status) {
|
|
status.style.cursor = 'pointer';
|
|
status.addEventListener('click', () => this.toggleWakeLock());
|
|
}
|
|
|
|
await this.requestWakeLock();
|
|
|
|
document.addEventListener('visibilitychange', async () => {
|
|
if (document.visibilityState === 'visible' && this.wakeLockEnabled) {
|
|
await this.requestWakeLock();
|
|
}
|
|
});
|
|
}
|
|
|
|
async toggleWakeLock() {
|
|
if (this.wakeLock) {
|
|
await this.wakeLock.release();
|
|
this.wakeLock = null;
|
|
this.wakeLockEnabled = false;
|
|
this.updateWakeLockStatus(false);
|
|
this.showToast('Screen can now sleep', 'info');
|
|
} else {
|
|
this.wakeLockEnabled = true;
|
|
await this.requestWakeLock();
|
|
if (this.wakeLock) {
|
|
this.showToast('Screen will stay awake', 'success');
|
|
}
|
|
}
|
|
}
|
|
|
|
async requestWakeLock() {
|
|
try {
|
|
this.wakeLock = await navigator.wakeLock.request('screen');
|
|
this.wakeLockEnabled = true;
|
|
this.updateWakeLockStatus(true);
|
|
|
|
this.wakeLock.addEventListener('release', () => {
|
|
this.updateWakeLockStatus(false);
|
|
});
|
|
} catch (err) {
|
|
console.log('Wake Lock error:', err);
|
|
this.updateWakeLockStatus(false);
|
|
const status = document.getElementById('wake-lock-status');
|
|
if (status && !status.classList.contains('unsupported')) {
|
|
status.title = 'Wake lock failed: ' + err.message;
|
|
}
|
|
}
|
|
}
|
|
|
|
updateWakeLockStatus(active) {
|
|
const status = document.getElementById('wake-lock-status');
|
|
if (status) {
|
|
status.classList.toggle('active', active);
|
|
if (!status.classList.contains('unsupported')) {
|
|
status.title = active ? 'Screen will stay on (click to toggle)' : 'Screen may sleep (click to enable)';
|
|
}
|
|
}
|
|
}
|
|
|
|
// PWA manifest setup
|
|
setupPWA() {
|
|
// Create dynamic manifest for this session
|
|
const manifest = {
|
|
name: 'MacroPad',
|
|
short_name: 'MacroPad',
|
|
description: 'Remote macro control',
|
|
start_url: `/${this.sessionId}/app`,
|
|
display: 'standalone',
|
|
background_color: '#2e2e2e',
|
|
theme_color: '#007acc',
|
|
icons: [
|
|
{ src: '/static/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
|
|
{ src: '/static/icons/icon-512.png', sizes: '512x512', type: 'image/png' }
|
|
]
|
|
};
|
|
|
|
const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
|
|
const manifestUrl = URL.createObjectURL(blob);
|
|
document.getElementById('manifest-link').setAttribute('href', manifestUrl);
|
|
}
|
|
}
|
|
|
|
let app;
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
app = new MacroPadApp();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|