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

Add Artist Map Hub section below hero slider

Browse source 
Full-width section with three mode cards: Watchlist (existing), Genres
(placeholder), and Explorer (placeholder). Dark gradient background
with purple/blue ambient glow, animated dot grid overlay, and polished
card hover effects. Replaces the old small hero button.

Responsive: 3-column desktop, 1-column mobile.
This commit is contained in:
Broque Thomas 2026-04-04 12:25:19 -07:00
parent c336604b71
commit f348b6a7cb
3 changed files with 156 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
webui/index.html
View file

@ -3060,10 +3060,64 @@
<button class="discover-hero-view-all" id="discover-hero-view-all" onclick="openRecommendedArtistsModal()">
View Recommended
</button>
<button class="discover-hero-artist-map-btn" onclick="openArtistMap()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><circle cx="4" cy="6" r="2"/><circle cx="20" cy="6" r="2"/><circle cx="4" cy="18" r="2"/><circle cx="20" cy="18" r="2"/><line x1="6" y1="7" x2="10" y2="10"/><line x1="14" y1="10" x2="18" y2="7"/><line x1="6" y1="17" x2="10" y2="14"/><line x1="14" y1="14" x2="18" y2="17"/></svg>
Artist Map
</button>
</div>
</div>
<!-- Artist Map Hub -->
<div class="artmap-hub">
<div class="artmap-hub-bg"></div>
<div class="artmap-hub-content">
<div class="artmap-hub-header">
<svg class="artmap-hub-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="3"/><circle cx="4" cy="6" r="2"/><circle cx="20" cy="6" r="2"/>
<circle cx="4" cy="18" r="2"/><circle cx="20" cy="18" r="2"/>
<line x1="6" y1="7" x2="10" y2="10"/><line x1="14" y1="10" x2="18" y2="7"/>
<line x1="6" y1="17" x2="10" y2="14"/><line x1="14" y1="14" x2="18" y2="17"/>
</svg>
<div>
<h2 class="artmap-hub-title">Artist Map</h2>
<p class="artmap-hub-subtitle">Explore the connections between your artists</p>
</div>
</div>
<div class="artmap-hub-cards">
<div class="artmap-hub-card" onclick="openArtistMap()">
<div class="artmap-hub-card-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
</div>
<div class="artmap-hub-card-text">
<h3>Watchlist</h3>
<p>Your watched artists and their similar connections</p>
</div>
<svg class="artmap-hub-card-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</div>
<div class="artmap-hub-card" onclick="openArtistMapGenre()">
<div class="artmap-hub-card-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><line x1="2" y1="12" x2="22" y2="12"/>
</svg>
</div>
<div class="artmap-hub-card-text">
<h3>Genres</h3>
<p>Artists clustered by genre across your library and cache</p>
</div>
<svg class="artmap-hub-card-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</div>
<div class="artmap-hub-card" onclick="openArtistMapExplorer()">
<div class="artmap-hub-card-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
<line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/>
</svg>
</div>
<div class="artmap-hub-card-text">
<h3>Explorer</h3>
<p>Pick any artist and explore outward through their connections</p>
</div>
<svg class="artmap-hub-card-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</div>
</div>
</div>
</div>

8
webui/static/script.js
View file

@ -56200,6 +56200,14 @@ function artMapShowShortcuts() {
document.body.appendChild(overlay);
}
function openArtistMapGenre() {
showToast('Genre Map coming soon', 'info');
}
function openArtistMapExplorer() {
showToast('Artist Explorer coming soon', 'info');
}
function artMapToggleSimilar() {
_artMap._hideSimilar = !_artMap._hideSimilar;
_artMap.dirty = true;

99
webui/static/style.css
View file

@ -29680,16 +29680,97 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.ya-info-footer { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: center; gap: 10px; }
/* ── Artist Map ── */
.discover-hero-artist-map-btn {
display: flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: 10px; font-size: 12px; font-weight: 600;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.2s;
/* ── Artist Map Hub ── */
.artmap-hub {
position: relative; border-radius: 16px; overflow: hidden;
margin-bottom: 24px;
border: 1px solid rgba(255,255,255,0.06);
}
.discover-hero-artist-map-btn:hover {
background: rgba(138,43,226,0.15); border-color: rgba(138,43,226,0.3);
color: #fff; transform: translateY(-1px);
.artmap-hub-bg {
position: absolute; inset: 0; z-index: 0;
background: linear-gradient(135deg, #0d0d1a 0%, #1a0a2e 30%, #0a1628 60%, #0d0d1a 100%);
}
.artmap-hub-bg::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse at 30% 50%, rgba(138,43,226,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 70% 50%, rgba(59,130,246,0.06) 0%, transparent 60%);
}
/* Animated dot grid overlay */
.artmap-hub-bg::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background-image: radial-gradient(rgba(138,43,226,0.15) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.3;
animation: artmap-dots-drift 20s linear infinite;
}
@keyframes artmap-dots-drift {
0% { background-position: 0 0; }
100% { background-position: 24px 48px; }
}
.artmap-hub-content {
position: relative; z-index: 1; padding: 28px 32px;
}
.artmap-hub-header {
display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.artmap-hub-icon { color: rgba(138,43,226,0.7); }
.artmap-hub-title {
font-size: 20px; font-weight: 800; color: #fff; margin: 0;
letter-spacing: -0.3px;
}
.artmap-hub-subtitle {
font-size: 13px; color: rgba(255,255,255,0.35); margin: 2px 0 0;
}
.artmap-hub-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 768px) {
.artmap-hub-cards { grid-template-columns: 1fr; }
}
.artmap-hub-card {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px; border-radius: 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
cursor: pointer; transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
position: relative; overflow: hidden;
}
.artmap-hub-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(138,43,226,0.06) 0%, transparent 50%);
opacity: 0; transition: opacity 0.25s;
}
.artmap-hub-card:hover {
border-color: rgba(138,43,226,0.25);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 20px rgba(138,43,226,0.08);
}
.artmap-hub-card:hover::before { opacity: 1; }
.artmap-hub-card-icon {
width: 52px; height: 52px; border-radius: 12px;
background: rgba(138,43,226,0.1); border: 1px solid rgba(138,43,226,0.15);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: rgba(138,43,226,0.7);
transition: all 0.25s;
}
.artmap-hub-card:hover .artmap-hub-card-icon {
background: rgba(138,43,226,0.15); color: rgba(138,43,226,0.9);
transform: scale(1.05);
}
.artmap-hub-card-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.artmap-hub-card-text h3 {
font-size: 15px; font-weight: 700; color: #fff; margin: 0;
}
.artmap-hub-card-text p {
font-size: 11px; color: rgba(255,255,255,0.3); margin: 4px 0 0;
line-height: 1.4;
}
.artmap-hub-card-arrow {
color: rgba(255,255,255,0.15); flex-shrink: 0;
transition: all 0.2s; position: relative; z-index: 1;
}
.artmap-hub-card:hover .artmap-hub-card-arrow {
color: rgba(138,43,226,0.6); transform: translateX(4px);
}
.artist-map-container {
position: fixed; inset: 0; z-index: 100;