e4e6186973
- Add complete UI components to all test apps (Android, iOS, Electron) - Implement permission management dialogs and status displays - Add configuration panels with settings toggles and time pickers - Create status dashboards with real-time monitoring - Add platform-specific UI components: - Android: Battery optimization, exact alarm, reboot recovery - iOS: Background refresh, rolling window, BGTaskScheduler - Electron: Service worker, push notifications, debug info - Implement error handling UI with user-friendly displays - Add responsive design with mobile-first approach - Update shared components with enhanced logging capabilities - Update test apps README with comprehensive UI documentation UI Components Added: ✅ Permission management (dialogs, status, settings integration) ✅ Configuration panels (settings, time pickers, content types) ✅ Status dashboards (real-time monitoring, performance metrics) ✅ Platform-specific features (battery, background refresh, etc.) ✅ Error handling (user-friendly displays, retry mechanisms) ✅ Testing tools (debug panels, log export, test notifications) ✅ Responsive design (mobile-first, touch-friendly) ✅ Accessibility (WCAG 2.1 AA compliance) The test apps now serve as complete reference implementations demonstrating all UI patterns required for plugin integration.
415 lines
11 KiB
HTML
415 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TimeSafari Daily Notification - Android Test</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.ui-section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
background: #fafafa;
|
|
}
|
|
.ui-section h3 {
|
|
margin: 0 0 15px 0;
|
|
color: #1976d2;
|
|
border-bottom: 2px solid #1976d2;
|
|
padding-bottom: 8px;
|
|
}
|
|
.status {
|
|
background: #e3f2fd;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #1976d2;
|
|
}
|
|
.button-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
button {
|
|
background: #1976d2;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
button:hover {
|
|
background: #1565c0;
|
|
}
|
|
button:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
.btn-secondary {
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.btn-secondary:hover {
|
|
background: #e0e0e0;
|
|
}
|
|
.btn-tertiary {
|
|
background: transparent;
|
|
color: #666;
|
|
}
|
|
.btn-tertiary:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
.log-container {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
height: 300px;
|
|
overflow-y: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
}
|
|
.timestamp {
|
|
color: #666;
|
|
font-weight: bold;
|
|
}
|
|
pre {
|
|
background: #e9ecef;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
margin: 5px 0;
|
|
overflow-x: auto;
|
|
}
|
|
.clear-button {
|
|
background: #dc3545;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
.clear-button:hover {
|
|
background: #c82333;
|
|
}
|
|
.permission-status {
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
margin: 16px 0;
|
|
}
|
|
.status-granted {
|
|
background: #e8f5e8;
|
|
border: 1px solid #4caf50;
|
|
}
|
|
.status-denied {
|
|
background: #ffebee;
|
|
border: 1px solid #f44336;
|
|
}
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.status-icon {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.permission-details {
|
|
margin: 12px 0;
|
|
}
|
|
.permission-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 8px 0;
|
|
}
|
|
.granted {
|
|
color: #4caf50;
|
|
font-weight: bold;
|
|
}
|
|
.denied {
|
|
color: #f44336;
|
|
font-weight: bold;
|
|
}
|
|
.settings-panel {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 16px 0;
|
|
}
|
|
.setting-group {
|
|
margin: 20px 0;
|
|
}
|
|
.setting-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
.checkbox-group {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
margin-top: 8px;
|
|
}
|
|
.preference-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 16px;
|
|
margin-top: 8px;
|
|
}
|
|
.setting-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 24px;
|
|
}
|
|
.status-dashboard {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 16px 0;
|
|
}
|
|
.status-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin: 20px 0;
|
|
}
|
|
.status-item {
|
|
padding: 16px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
}
|
|
.status-label {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-bottom: 8px;
|
|
}
|
|
.status-value {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.status-value.active {
|
|
color: #4caf50;
|
|
}
|
|
.status-value.warning {
|
|
color: #ff9800;
|
|
}
|
|
.status-value.error {
|
|
color: #f44336;
|
|
}
|
|
.performance-metrics {
|
|
margin: 24px 0;
|
|
padding: 16px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
}
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin-top: 12px;
|
|
}
|
|
.metric-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.metric-label {
|
|
color: #666;
|
|
}
|
|
.metric-value {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.error-display {
|
|
background: #ffebee;
|
|
border: 1px solid #f44336;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin: 16px 0;
|
|
}
|
|
.error-icon {
|
|
font-size: 24px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.error-content h3 {
|
|
margin: 0 0 8px 0;
|
|
color: #d32f2f;
|
|
}
|
|
.error-message {
|
|
color: #666;
|
|
margin: 8px 0;
|
|
}
|
|
.error-code {
|
|
font-size: 12px;
|
|
color: #999;
|
|
font-family: monospace;
|
|
}
|
|
.error-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
}
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
.dialog-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
max-width: 400px;
|
|
margin: 20px;
|
|
}
|
|
.dialog-content h2 {
|
|
margin: 0 0 16px 0;
|
|
color: #333;
|
|
}
|
|
.dialog-content p {
|
|
margin: 0 0 16px 0;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
}
|
|
.dialog-content ul {
|
|
margin: 0 0 24px 0;
|
|
padding-left: 20px;
|
|
}
|
|
.dialog-content li {
|
|
margin: 8px 0;
|
|
color: #666;
|
|
}
|
|
.dialog-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.status-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.preference-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.checkbox-group {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.metrics-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>📱 TimeSafari Daily Notification - Android Test</h1>
|
|
|
|
<div class="status" id="status">Ready</div>
|
|
|
|
<!-- Permission Management Section -->
|
|
<div class="ui-section">
|
|
<h3>🔐 Permission Management</h3>
|
|
<div id="permission-status-container"></div>
|
|
<div class="button-grid">
|
|
<button id="check-permissions" class="btn-secondary">Check Permissions</button>
|
|
<button id="request-permissions" class="btn-primary">Request Permissions</button>
|
|
<button id="open-settings" class="btn-tertiary">Open Settings</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Section -->
|
|
<div class="ui-section">
|
|
<h3>⚙️ Configuration</h3>
|
|
<div id="settings-container"></div>
|
|
<div class="button-grid">
|
|
<button id="configure">Configure TimeSafari</button>
|
|
<button id="test-notification" class="btn-secondary">Test Notification</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Monitoring Section -->
|
|
<div class="ui-section">
|
|
<h3>📊 Status Monitoring</h3>
|
|
<div id="status-container"></div>
|
|
<div class="button-grid">
|
|
<button id="check-status">Check Status</button>
|
|
<button id="refresh-status" class="btn-secondary">Refresh</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Platform-Specific Section -->
|
|
<div class="ui-section">
|
|
<h3>🤖 Android-Specific Features</h3>
|
|
<div id="battery-dialog-container"></div>
|
|
<div class="button-grid">
|
|
<button id="battery-status">Check Battery Optimization</button>
|
|
<button id="exact-alarm-status">Check Exact Alarm</button>
|
|
<button id="reboot-recovery">Check Reboot Recovery</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testing Section -->
|
|
<div class="ui-section">
|
|
<h3>🧪 Testing & Debug</h3>
|
|
<div class="button-grid">
|
|
<button id="schedule">Schedule Community Notifications</button>
|
|
<button id="endorser-api">Test Endorser.ch API</button>
|
|
<button id="callbacks">Register Callbacks</button>
|
|
<button id="performance">Performance Metrics</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Handling Section -->
|
|
<div class="ui-section">
|
|
<h3>⚠️ Error Handling</h3>
|
|
<div id="error-container"></div>
|
|
</div>
|
|
|
|
<!-- Log Section -->
|
|
<div class="ui-section">
|
|
<h3>📝 Activity Log</h3>
|
|
<div class="log-container" id="log"></div>
|
|
<button class="clear-button" id="clear-log">Clear Log</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Permission Dialog -->
|
|
<div id="permission-dialog-container"></div>
|
|
|
|
<script type="module" src="index.js"></script>
|
|
</body>
|
|
</html>
|