226 lines
8.3 KiB
HTML
226 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Rekordbox Sync</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Header -->
|
|
<header class="app-header">
|
|
<div class="header-left">
|
|
<h1><i class="fas fa-sync-alt"></i> Rekordbox Sync</h1>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="settingsBtn" class="btn btn-secondary" title="Settings">
|
|
<i class="fas fa-cog"></i>
|
|
</button>
|
|
<button id="minimizeBtn" class="btn btn-secondary" title="Minimize">
|
|
<i class="fas fa-window-minimize"></i>
|
|
</button>
|
|
<button id="closeBtn" class="btn btn-secondary" title="Close">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Status Panel -->
|
|
<div class="status-panel">
|
|
<div class="status-item">
|
|
<span class="status-label">Sync Status:</span>
|
|
<span id="syncStatus" class="status-value">Stopped</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Last Sync:</span>
|
|
<span id="lastSync" class="status-value">Never</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Local Files:</span>
|
|
<span id="filesSynced" class="status-value">0</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Progress:</span>
|
|
<div class="progress-container">
|
|
<div id="progressBar" class="progress-bar" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div id="syncDetails" class="sync-details"></div>
|
|
</div>
|
|
|
|
<!-- Control Panel -->
|
|
<div class="control-panel">
|
|
<button id="startSyncBtn" class="btn btn-primary">
|
|
<i class="fas fa-play"></i> Start Sync
|
|
</button>
|
|
<button id="stopSyncBtn" class="btn btn-danger" disabled>
|
|
<i class="fas fa-stop"></i> Stop Sync
|
|
</button>
|
|
<button id="forceSyncBtn" class="btn btn-secondary">
|
|
<i class="fas fa-sync"></i> Force Full Sync
|
|
</button>
|
|
<button id="immediateSyncBtn" class="btn btn-info">
|
|
<i class="fas fa-bolt"></i> Immediate Sync
|
|
</button>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="activity-panel">
|
|
<h3><i class="fas fa-history"></i> Recent Activity</h3>
|
|
<div id="activityLog" class="activity-log">
|
|
<div class="empty-activity">No recent activity</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="settingsModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2><i class="fas fa-cog"></i> Settings</h2>
|
|
<button id="closeSettingsBtn" class="close-btn">×</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<!-- S3 Configuration -->
|
|
<div class="settings-section">
|
|
<h3><i class="fas fa-cloud"></i> S3 Configuration</h3>
|
|
<div class="form-group">
|
|
<label for="s3Endpoint">Endpoint:</label>
|
|
<input type="url" id="s3Endpoint" placeholder="https://garage.geertrademakers.nl">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="s3Region">Region:</label>
|
|
<input type="text" id="s3Region" placeholder="garage">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="s3AccessKey">Access Key ID:</label>
|
|
<input type="text" id="s3AccessKey" placeholder="Your access key">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="s3SecretKey">Secret Access Key:</label>
|
|
<input type="password" id="s3SecretKey" placeholder="Your secret key">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="s3Bucket">Bucket Name:</label>
|
|
<input type="text" id="s3Bucket" placeholder="music">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="s3UseSSL" checked>
|
|
Use SSL
|
|
</label>
|
|
</div>
|
|
<button id="testS3Btn" class="btn btn-secondary">Test Connection</button>
|
|
</div>
|
|
|
|
<!-- Sync Configuration -->
|
|
<div class="settings-section">
|
|
<h3><i class="fas fa-sync"></i> Sync Configuration</h3>
|
|
<div class="form-group">
|
|
<label for="localPath">Local Music Folder:</label>
|
|
<div class="path-input-group">
|
|
<input type="text" id="localPath" placeholder="Select music folder" readonly>
|
|
<button id="selectFolderBtn" class="btn btn-secondary">Browse</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="syncInterval">Sync Interval (seconds):</label>
|
|
<input type="number" id="syncInterval" min="5" max="300" value="30">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="autoStart">
|
|
Auto-start sync on app launch
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="conflictResolution">Conflict Resolution:</label>
|
|
<select id="conflictResolution">
|
|
<option value="newer-wins">Newer file wins</option>
|
|
<option value="local-wins">Local file wins</option>
|
|
<option value="remote-wins">Remote file wins</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- UI Configuration -->
|
|
<div class="settings-section">
|
|
<h3><i class="fas fa-palette"></i> Interface</h3>
|
|
<div class="form-group">
|
|
<label for="theme">Theme:</label>
|
|
<select id="theme">
|
|
<option value="system">System</option>
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="notifications" checked>
|
|
Show notifications
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="minimizeToTray" checked>
|
|
Minimize to system tray
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button id="exportEnvBtn" class="btn btn-secondary">Export to .env</button>
|
|
<button id="saveSettingsBtn" class="btn btn-primary">Save Settings</button>
|
|
<button id="cancelSettingsBtn" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Container -->
|
|
<div id="notificationContainer" class="notification-container"></div>
|
|
</div>
|
|
|
|
<script>
|
|
console.log('🚀 HTML script tag executed!');
|
|
console.log('🔍 Testing basic JavaScript execution...');
|
|
|
|
// Test if we can access the DOM
|
|
if (document.getElementById('syncStatus')) {
|
|
console.log('✅ DOM element syncStatus found!');
|
|
} else {
|
|
console.log('❌ DOM element syncStatus NOT found!');
|
|
}
|
|
|
|
// Test if we can access window
|
|
console.log('🔍 Window object:', typeof window);
|
|
console.log('🔍 Document object:', typeof document);
|
|
|
|
// Test if we can access the electronAPI
|
|
console.log('🔍 Electron API available:', typeof window.electronAPI);
|
|
|
|
// Test if we can access the DOM elements
|
|
const elements = ['syncStatus', 'filesSynced', 'lastSync', 'startSyncBtn', 'stopSyncBtn'];
|
|
elements.forEach(id => {
|
|
const element = document.getElementById(id);
|
|
console.log(`🔍 Element ${id}:`, element ? 'Found' : 'NOT Found');
|
|
});
|
|
|
|
// Test if we can modify DOM elements
|
|
const testElement = document.getElementById('syncStatus');
|
|
if (testElement) {
|
|
testElement.textContent = 'TEST - JavaScript is working!';
|
|
console.log('✅ Successfully modified DOM element!');
|
|
}
|
|
</script>
|
|
<script src="renderer.js"></script>
|
|
</body>
|
|
</html>
|