mirror of https://github.com/Nezreka/SoulSync.git
parent
d9e981c93e
commit
bf445f9939
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>SoulSync - Web Mode</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎵 SoulSync - Web Mode</h1>
|
||||
<p>Your music sync application is running in headless mode.</p>
|
||||
|
||||
<div class="status">
|
||||
<h3>Service Status</h3>
|
||||
<div id="status-container">
|
||||
<div class="service">
|
||||
<span>Spotify:</span>
|
||||
<span id="spotify-status" class="disconnected">Checking...</span>
|
||||
</div>
|
||||
<div class="service">
|
||||
<span>Media Server:</span>
|
||||
<span id="media-status" class="disconnected">Checking...</span>
|
||||
</div>
|
||||
<div class="service">
|
||||
<span>Soulseek:</span>
|
||||
<span id="soulseek-status" class="disconnected">Checking...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status">
|
||||
<h3>Available Endpoints</h3>
|
||||
<ul>
|
||||
<li><a href="/status" style="color: #4caf50;">/status</a> - Service status JSON</li>
|
||||
<li><a href="/config" style="color: #4caf50;">/config</a> - Configuration info</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
function updateStatus() {
|
||||
fetch('/status')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('spotify-status').textContent = data.spotify ? 'Connected' : 'Disconnected';
|
||||
document.getElementById('spotify-status').className = data.spotify ? 'connected' : 'disconnected';
|
||||
|
||||
document.getElementById('media-status').textContent = data.media_server ? 'Connected' : 'Disconnected';
|
||||
document.getElementById('media-status').className = data.media_server ? 'connected' : 'disconnected';
|
||||
|
||||
document.getElementById('soulseek-status').textContent = data.soulseek ? 'Connected' : 'Disconnected';
|
||||
document.getElementById('soulseek-status').className = data.soulseek ? 'connected' : 'disconnected';
|
||||
})
|
||||
.catch(error => console.error('Error fetching status:', error));
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Update status immediately
|
||||
updateStatus();
|
||||
|
||||
// Update status every 5 seconds
|
||||
setInterval(updateStatus, 5000);
|
||||
|
||||
console.log('SoulSync Web UI loaded successfully!');
|
||||
});
|
||||
@ -0,0 +1,33 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 40px;
|
||||
background: #121212;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 20px;
|
||||
background: #1e1e1e;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.service {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.connected {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.disconnected {
|
||||
color: #f44336;
|
||||
}
|
||||
Loading…
Reference in new issue