danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

dashboard design

Browse source
This commit is contained in:
Broque Thomas 2025-08-24 12:14:38 -07:00
parent 9686c6f1df
commit facc45e6f4
2 changed files with 719 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
webui/index.html
View file

@ -128,34 +128,152 @@
<div class="main-content">
<!-- Dashboard Page -->
<div class="page active" id="dashboard-page">
<div class="page-header">
<h2>Dashboard</h2>
</div>
<div class="dashboard-content">
<!-- Activity Feed -->
<div class="activity-section">
<h3>Recent Activity</h3>
<div class="activity-feed" id="activity-feed">
<div class="activity-item">
<span class="activity-time">Just now</span>
<span class="activity-text">Web UI initialized</span>
<div class="dashboard-container">
<div class="dashboard-header">
<div class="header-text">
<h2 class="header-title">System Dashboard</h2>
<p class="header-subtitle">Monitor your music system health and manage operations</p>
</div>
<div class="header-spacer"></div>
<div class="header-actions">
<button class="header-button watchlist-button" id="watchlist-button">👁️ Watchlist (0)</button>
<button class="header-button wishlist-button" id="wishlist-button">🎵 Wishlist (0)</button>
</div>
</div>
<div class="dashboard-section">
<h3 class="section-title">Service Status</h3>
<div class="service-status-grid">
<div class="service-card" id="spotify-service-card">
<div class="service-card-header">
<span class="service-card-title">Spotify</span>
<span class="service-card-indicator disconnected" id="spotify-status-indicator">●</span>
</div>
<p class="service-card-status-text" id="spotify-status-text">Disconnected</p>
<p class="service-card-response-time" id="spotify-response-time">Response: --</p>
<div class="service-card-footer">
<button class="service-card-button" onclick="testConnection('spotify')">Test Connection</button>
</div>
</div>
<div class="service-card" id="media-server-service-card">
<div class="service-card-header">
<span class="service-card-title" id="media-server-service-name">Plex</span>
<span class="service-card-indicator disconnected" id="media-server-status-indicator">●</span>
</div>
<p class="service-card-status-text" id="media-server-status-text">Disconnected</p>
<p class="service-card-response-time" id="media-server-response-time">Response: --</p>
<div class="service-card-footer">
<button class="service-card-button" onclick="testConnection('server')">Test Connection</button>
</div>
</div>
<div class="service-card" id="soulseek-service-card">
<div class="service-card-header">
<span class="service-card-title">Soulseek</span>
<span class="service-card-indicator disconnected" id="soulseek-status-indicator">●</span>
</div>
<p class="service-card-status-text" id="soulseek-status-text">Disconnected</p>
<p class="service-card-response-time" id="soulseek-response-time">Response: --</p>
<div class="service-card-footer">
<button class="service-card-button" onclick="testConnection('soulseek')">Test Connection</button>
</div>
</div>
</div>
</div>
<div class="dashboard-section">
<h3 class="section-title">System Statistics</h3>
<div class="stats-grid-dashboard">
<div class="stat-card-dashboard" id="active-downloads-card">
<p class="stat-card-title">Active Downloads</p>
<p class="stat-card-value">0</p>
<p class="stat-card-subtitle">Currently downloading</p>
</div>
<div class="stat-card-dashboard" id="finished-downloads-card">
<p class="stat-card-title">Finished Downloads</p>
<p class="stat-card-value">0</p>
<p class="stat-card-subtitle">Completed this session</p>
</div>
<div class="stat-card-dashboard" id="download-speed-card">
<p class="stat-card-title">Download Speed</p>
<p class="stat-card-value">0 KB/s</p>
<p class="stat-card-subtitle">Combined speed</p>
</div>
<div class="stat-card-dashboard" id="active-syncs-card">
<p class="stat-card-title">Active Syncs</p>
<p class="stat-card-value">0</p>
<p class="stat-card-subtitle">Playlists syncing</p>
</div>
<div class="stat-card-dashboard" id="uptime-card">
<p class="stat-card-title">System Uptime</p>
<p class="stat-card-value">0m</p>
<p class="stat-card-subtitle">Application runtime</p>
</div>
<div class="stat-card-dashboard" id="memory-card">
<p class="stat-card-title">Memory Usage</p>
<p class="stat-card-value">--</p>
<p class="stat-card-subtitle">Current usage</p>
</div>
</div>
</div>
<!-- Statistics Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value">0</div>
<div class="stat-label">Tracks Synced</div>
<div class="dashboard-section">
<h3 class="section-title">Tools & Operations</h3>
<div class="tools-grid">
<div class="tool-card" id="db-updater-card">
<h4 class="tool-card-title">Database Updater</h4>
<p class="tool-card-info">Last Full Refresh: <span id="db-last-refresh">Never</span></p>
<div class="tool-card-controls">
<select id="db-refresh-type">
<option value="incremental">Incremental Update</option>
<option value="full">Full Refresh</option>
</select>
<button id="db-update-button">Update Database</button>
</div>
<div class="tool-card-progress-section">
<p class="progress-phase-label" id="db-phase-label">Idle</p>
<div class="progress-bar-container">
<div class="progress-bar-fill" id="db-progress-bar" style="width: 0%;"></div>
</div>
<p class="progress-details-label" id="db-progress-label">0 / 0 artists (0.0%)</p>
</div>
</div>
<div class="tool-card" id="metadata-updater-card">
<h4 class="tool-card-title">Metadata Updater</h4>
<p class="tool-card-info">Updates artist photos, genres, and album art from Spotify.</p>
<div class="tool-card-controls">
<select id="metadata-refresh-interval">
<option value="180">6 months</option>
<option value="90">3 months</option>
<option value="30" selected>1 month</option>
<option value="14">2 weeks</option>
<option value="7">1 week</option>
<option value="0">Full refresh</option>
</select>
<button id="metadata-update-button">Begin Update</button>
</div>
<div class="tool-card-progress-section">
<p class="progress-phase-label" id="metadata-phase-label">Current Artist: Not running</p>
<div class="progress-bar-container">
<div class="progress-bar-fill" id="metadata-progress-bar" style="width: 0%;"></div>
</div>
<p class="progress-details-label" id="metadata-progress-label">0 / 0 artists (0.0%)</p>
</div>
</div>
</div>
<div class="stat-card">
<div class="stat-value">0</div>
<div class="stat-label">Downloads</div>
</div>
<div class="stat-card">
<div class="stat-value">3</div>
<div class="stat-label">Services</div>
</div>
<div class="dashboard-section">
<h3 class="section-title">Recent Activity</h3>
<div class="activity-feed-container" id="dashboard-activity-feed">
<div class="activity-item">
<span class="activity-icon">📊</span>
<div class="activity-text-content">
<p class="activity-title">System Started</p>
<p class="activity-subtitle">Dashboard initialized successfully</p>
</div>
<p class="activity-time">Now</p>
</div>
</div>
</div>
</div>

578
webui/static/style.css
View file

@ -3192,3 +3192,581 @@ body {
100% { opacity: 0.7; }
}
/* ======================================================= */
/* == STYLES FOR DASHBOARD PAGE == */
/* ======================================================= */
/* Main Dashboard Layout */
.dashboard-container {
display: flex;
flex-direction: column;
gap: 25px; /* Spacing between sections */
padding-bottom: 30px; /* Add space at the bottom */
}
.dashboard-section {
display: flex;
flex-direction: column;
gap: 15px; /* Spacing within a section (e.g., between title and content) */
}
.section-title {
font-family: 'SF Pro Display', -apple-system, sans-serif;
font-size: 18px;
font-weight: 700;
color: #ffffff;
padding-bottom: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Header Styling */
.dashboard-header {
display: flex;
align-items: center;
gap: 20px;
}
.header-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.header-title {
font-size: 28px;
font-weight: 700;
color: #ffffff;
}
.header-subtitle {
font-size: 14px;
color: #b3b3b3;
}
.header-spacer {
flex-grow: 1; /* Pushes buttons to the right */
}
.header-actions {
display: flex;
gap: 10px;
}
.header-button {
height: 45px;
border: none;
border-radius: 22px;
color: #000000;
font-size: 14px;
font-weight: 600;
padding: 12px 24px;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
outline: none;
user-select: none;
/* Enhanced glassmorphic effect */
backdrop-filter: blur(8px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.header-button:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 12px 25px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.wishlist-button {
background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);
}
.wishlist-button:hover {
background: linear-gradient(135deg, #1ed760 0%, #22ff6b 100%);
}
.watchlist-button {
background: linear-gradient(135deg, #ffc107 0%, #ffca28 100%);
}
.watchlist-button:hover {
background: linear-gradient(135deg, #ffca28 0%, #ffd54f 100%);
}
/* Service Status Grid */
.service-status-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.service-card {
/* Premium glassmorphic foundation matching modal and search cards */
background: linear-gradient(135deg,
rgba(26, 26, 26, 0.95) 0%,
rgba(18, 18, 18, 0.98) 100%);
backdrop-filter: blur(12px) saturate(1.1);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 20px;
position: relative;
overflow: hidden;
/* Neumorphic depth shadows - elevated card effect */
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(29, 185, 84, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateZ(0);
}
.service-card:hover {
/* Enhanced glassmorphic hover state */
background: linear-gradient(135deg,
rgba(30, 30, 30, 0.98) 0%,
rgba(22, 22, 22, 1.0) 100%);
backdrop-filter: blur(16px) saturate(1.2);
border-color: rgba(29, 185, 84, 0.3);
border-top-color: rgba(29, 185, 84, 0.4);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(29, 185, 84, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
transform: translateY(-2px) translateZ(0);
}
.service-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.service-card-title {
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.service-card-indicator {
font-size: 18px;
}
.service-card-indicator.connected {
color: #1db954; /* Green */
}
.service-card-indicator.disconnected {
color: #ff4444; /* Red */
}
.service-card-status-text {
font-size: 12px;
color: #b3b3b3;
}
.service-card-response-time {
font-size: 11px;
color: #888888;
}
.service-card-footer {
margin-top: auto; /* Pushes button to the bottom */
padding-top: 8px;
}
.service-card-button {
/* Modal-style button matching new button system */
width: 100%;
padding: 10px 16px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
outline: none;
user-select: none;
/* Secondary modal style */
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
}
.service-card-button:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
transform: translateY(-1px);
}
/* System Stats Grid */
.stats-grid-dashboard {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.stat-card-dashboard {
/* Premium glassmorphic foundation matching other cards */
background: linear-gradient(135deg,
rgba(26, 26, 26, 0.95) 0%,
rgba(18, 18, 18, 0.98) 100%);
backdrop-filter: blur(12px) saturate(1.1);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 24px 20px;
position: relative;
overflow: hidden;
/* Neumorphic depth shadows */
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(29, 185, 84, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 5px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateZ(0);
}
.stat-card-title {
font-size: 12px;
color: #b3b3b3;
}
.stat-card-value {
font-size: 26px;
font-weight: 700;
color: #ffffff;
}
.stat-card-subtitle {
font-size: 11px;
color: #888888;
}
/* Tools & Operations Grid */
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
}
.tool-card {
/* Premium glassmorphic foundation */
background: linear-gradient(135deg,
rgba(26, 26, 26, 0.95) 0%,
rgba(18, 18, 18, 0.98) 100%);
backdrop-filter: blur(12px) saturate(1.1);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 24px;
position: relative;
overflow: hidden;
/* Neumorphic depth shadows */
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(29, 185, 84, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateZ(0);
}
.tool-card-title {
font-size: 16px;
font-weight: 700;
color: #ffffff;
}
.tool-card-info {
font-size: 12px;
color: #b3b3b3;
min-height: 2em; /* Reserve space for two lines */
}
.tool-card-controls {
display: flex;
gap: 10px;
align-items: center;
}
.tool-card-controls select {
flex-grow: 1;
padding: 10px 16px;
background: linear-gradient(135deg,
rgba(51, 51, 51, 0.95) 0%,
rgba(34, 34, 34, 0.98) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: #ffffff;
font-size: 14px;
font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
outline: none;
transition: all 0.2s ease;
}
.tool-card-controls select:hover {
border-color: rgba(255, 255, 255, 0.2);
background: linear-gradient(135deg,
rgba(58, 58, 58, 0.95) 0%,
rgba(40, 40, 40, 0.98) 100%);
}
.tool-card-controls select option {
background: #333333;
color: #ffffff;
}
.tool-card-controls button {
/* Modal-style primary button */
padding: 10px 20px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
outline: none;
user-select: none;
/* Primary modal style */
background: #1db954;
color: #ffffff;
min-width: 140px;
}
.tool-card-controls button:hover:not(:disabled) {
background: #1ed760;
transform: translateY(-1px);
}
.tool-card-controls button:disabled {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.4);
cursor: not-allowed;
transform: none;
}
.tool-card-progress-section {
padding-top: 10px;
border-top: 1px solid #404040;
display: flex;
flex-direction: column;
gap: 8px;
}
.progress-phase-label {
font-size: 12px;
color: #b3b3b3;
}
.progress-details-label {
font-size: 11px;
color: #888888;
text-align: center;
}
.progress-bar-container {
height: 8px;
background: #555555;
border-radius: 4px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: #1db954;
border-radius: 4px;
width: 0%;
transition: width 0.3s ease;
}
/* Activity Feed */
.activity-feed-container {
/* Premium glassmorphic foundation */
background: linear-gradient(135deg,
rgba(26, 26, 26, 0.95) 0%,
rgba(18, 18, 18, 0.98) 100%);
backdrop-filter: blur(12px) saturate(1.1);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 8px;
position: relative;
overflow: hidden;
/* Neumorphic depth shadows */
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(29, 185, 84, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
max-height: 350px;
overflow-y: auto;
}
.activity-item {
display: flex;
align-items: center;
gap: 15px;
padding: 10px 15px;
border-bottom: 1px solid #404040;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-icon {
font-size: 18px;
width: 32px;
height: 32px;
background: rgba(29, 185, 84, 0.1);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.activity-text-content {
flex-grow: 1;
}
.activity-title {
font-size: 12px;
font-weight: 500;
color: #ffffff;
}
.activity-subtitle {
font-size: 11px;
color: #b3b3b3;
}
.activity-time {
font-size: 11px;
color: #b3b3b3;
white-space: nowrap;
}
/* Responsive Design Enhancements */
@media (max-width: 1200px) {
.tools-grid {
grid-template-columns: 1fr;
}
.service-status-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.stats-grid-dashboard {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
}
@media (max-width: 768px) {
.dashboard-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.header-actions {
width: 100%;
justify-content: flex-start;
}
.header-button {
flex: 1;
min-width: 120px;
}
.service-status-grid,
.stats-grid-dashboard {
grid-template-columns: 1fr;
gap: 15px;
}
.tool-card-controls {
flex-direction: column;
align-items: stretch;
}
.tool-card-controls button {
width: 100%;
min-width: auto;
}
}
/* Custom Scrollbar for Activity Feed */
.activity-feed-container::-webkit-scrollbar {
width: 8px;
}
.activity-feed-container::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.activity-feed-container::-webkit-scrollbar-thumb {
background: rgba(29, 185, 84, 0.3);
border-radius: 4px;
}
.activity-feed-container::-webkit-scrollbar-thumb:hover {
background: rgba(29, 185, 84, 0.5);
}
/* Enhanced Progress Bar Animation */
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg,
#1db954 0%,
#1ed760 50%,
#22ff6b 100%);
border-radius: 4px;
width: 0%;
transition: width 0.3s ease;
position: relative;
}
/* Progress bar shimmer effect when active */
.progress-bar-fill:not([style*="width: 0%"])::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.2) 50%,
transparent 100%);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}