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

Add page icons & gradient shimmer to all page headers

Browse source
This commit is contained in:
Broque Thomas 2026-03-10 13:12:50 -07:00
parent 08cc10c909
commit 51b5469e85
2 changed files with 118 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
webui/index.html
View file

@ -238,7 +238,7 @@
<div class="dashboard-container">
<div class="dashboard-header">
<div class="header-text">
<h2 class="header-title">System Dashboard</h2>
<h2 class="header-title"><img src="/static/dashboard.png" class="page-header-icon" alt=""><span>System Dashboard</span></h2>
<p class="header-subtitle">Monitor your music system health and manage operations</p>
</div>
<div class="header-spacer"></div>
@ -837,7 +837,7 @@
<div class="page" id="sync-page">
<!-- Header -->
<div class="sync-header">
<h2 class="sync-title">Playlist Sync</h2>
<h2 class="sync-title"><img src="/static/sync.png" class="page-header-icon" alt=""><span>Playlist Sync</span></h2>
<p class="sync-subtitle">Synchronize your Spotify, Tidal, and YouTube playlists with your media
server</p>
</div>
@ -1728,7 +1728,7 @@
<div class="downloads-header">
<div class="downloads-header-content">
<div class="downloads-header-text">
<h2 class="downloads-title">🎵 Music Downloads</h2>
<h2 class="downloads-title"><img src="/static/search.png" class="page-header-icon" alt=""><span>Music Downloads</span></h2>
<p class="downloads-subtitle">Search, discover, and download high-quality music</p>
</div>
<button id="toggle-download-manager-btn" class="toggle-manager-btn"
@ -2017,7 +2017,7 @@
<div class="artists-search-state" id="artists-search-state">
<div class="artists-search-container">
<div class="artists-welcome-section">
<h2 class="artists-welcome-title">🎵 Discover Artists</h2>
<h2 class="artists-welcome-title"><img src="/static/discover.png" class="page-header-icon" alt=""><span>Discover Artists</span></h2>
<p class="artists-welcome-subtitle">Search for your favorite artists and explore their
complete discography</p>
</div>
@ -2141,7 +2141,7 @@
<div class="automations-container">
<div class="dashboard-header">
<div class="header-text">
<h2 class="header-title">Automations</h2>
<h2 class="header-title"><img src="/static/automation.png" class="page-header-icon" alt=""><span>Automations</span></h2>
<p class="header-subtitle">Configure scheduled tasks and automated workflows</p>
</div>
<div class="header-spacer"></div>
@ -2183,7 +2183,7 @@
<!-- Header -->
<div class="library-header">
<div class="library-header-content">
<h2 class="library-title">📚 Music Library</h2>
<h2 class="library-title"><img src="/static/library.png" class="page-header-icon" alt=""><span>Music Library</span></h2>
<p class="library-subtitle">Browse your complete music collection</p>
</div>
<div class="library-stats" id="library-stats">
@ -3132,7 +3132,7 @@
<!-- Settings Page -->
<div class="page" id="settings-page">
<div class="page-header">
<h2>Settings</h2>
<h2><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2>
<button class="save-button" onclick="document.getElementById('save-settings').click()">💾 Save
Settings</button>
</div>
@ -4125,7 +4125,7 @@
<!-- Hydrabase Page (Dev Mode Only) -->
<div class="page" id="hydrabase-page">
<div class="page-header">
<h2><img src="/static/hydrabase.png?v=1" class="hydrabase-icon" style="width: 72px; height: 72px;"> Hydrabase</h2>
<h2><img src="/static/hydrabase.png?v=1" class="page-header-icon" alt=""><span>Hydrabase</span></h2>
<div style="display: flex; align-items: center; gap: 12px;">
<span id="hydra-connection-status" style="color: #888; font-size: 13px;">Disconnected</span>
<button class="test-button" id="hydra-connect-btn" onclick="hydrabaseToggleConnection()">Connect</button>
@ -4226,7 +4226,7 @@
<!-- Header with staging info -->
<div class="import-page-header">
<div class="import-page-title-row">
<h1 class="import-page-title">Import Music</h1>
<h1 class="import-page-title"><img src="/static/import.png" class="page-header-icon" alt=""><span>Import Music</span></h1>
<button class="import-page-refresh-btn" onclick="importPageRefreshStaging()" title="Re-scan staging folder">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M13.65 2.35A8 8 0 1 0 16 8h-2a6 6 0 1 1-1.76-4.24L10 6h6V0l-2.35 2.35z"/></svg>
Refresh

122
webui/static/style.css
View file

@ -1305,12 +1305,23 @@ body {
}
.page-header h2 {
font-family: 'SF Pro Display', -apple-system, sans-serif;
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 28px;
font-weight: 700;
color: #ffffff;
margin: 0;
letter-spacing: -0.5px;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 14px;
}
.page-header h2 > span {
background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: page-title-shimmer 6s ease-in-out infinite;
}
/* Dashboard Page Styling */
@ -2512,11 +2523,22 @@ body {
}
.downloads-header .downloads-title {
font-family: 'Segoe UI', sans-serif;
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 28px;
font-weight: 700;
color: #ffffff;
letter-spacing: 1px;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 14px;
}
.downloads-header .downloads-title > span {
background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: page-title-shimmer 6s ease-in-out infinite;
}
.downloads-header .downloads-subtitle {
@ -5154,25 +5176,53 @@ body {
gap: 5px;
}
/* Page header icon — shown beside all page titles */
.page-header-icon {
width: 88px;
height: 88px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.3));
transition: transform 0.3s ease, filter 0.3s ease;
}
.page-header-icon:hover {
transform: scale(1.08) rotate(-3deg);
filter: drop-shadow(0 4px 14px rgba(var(--accent-rgb), 0.5));
}
.header-title {
font-size: 30px;
font-weight: 700;
margin: 0 0 4px 0;
line-height: 1.2;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 14px;
}
.header-title > span {
background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: dashboard-title-shimmer 6s ease-in-out infinite;
animation: page-title-shimmer 6s ease-in-out infinite;
}
@keyframes dashboard-title-shimmer {
@keyframes page-title-shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@media (max-width: 768px) {
.page-header-icon {
width: 56px;
height: 56px;
}
}
.header-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
@ -6068,7 +6118,19 @@ body {
.sync-title {
font-size: 28px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 14px;
}
.sync-title > span {
background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: page-title-shimmer 6s ease-in-out infinite;
}
.sync-subtitle {
@ -13967,9 +14029,21 @@ body {
.artists-welcome-title {
font-size: 36px;
font-weight: 700;
color: #ffffff;
margin-bottom: 12px;
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 14px;
}
.artists-welcome-title > span {
background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: page-title-shimmer 6s ease-in-out infinite;
}
.artists-welcome-subtitle {
@ -15797,12 +15871,21 @@ body {
.library-title {
font-size: 28px;
font-weight: 700;
color: #ffffff;
margin: 0 0 8px 0;
background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
letter-spacing: -0.3px;
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
display: flex;
align-items: center;
gap: 14px;
}
.library-title > span {
background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: page-title-shimmer 6s ease-in-out infinite;
}
.library-subtitle {
@ -28533,8 +28616,21 @@ body {
.import-page-title {
font-size: 28px;
font-weight: 700;
color: #fff;
margin: 0;
letter-spacing: -0.3px;
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
display: flex;
align-items: center;
gap: 14px;
}
.import-page-title > span {
background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: page-title-shimmer 6s ease-in-out infinite;
}
.import-page-refresh-btn {