73 lines
3.5 KiB
Plaintext
73 lines
3.5 KiB
Plaintext
<div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 2em 2.5em; min-width: 340px; max-width: 600px; flex: 2 1 340px; display: flex; flex-direction: column; align-items: center; min-height: 340px;">
|
|
<h2 style="margin-top:0; font-size: 1.4em; color: #0071e3;">Top 5 Songs</h2>
|
|
<div id="artist-tabs" style="display: flex; gap: 0.5em; margin: 1em 0 1.5em 0;">
|
|
<button class="artist-tab" data-tab="upcoming" style="background: #e8f0fe; color: #0071e3; border: none; border-radius: 8px; padding: 0.4em 1em; font-weight: 500; cursor: pointer;">Upcoming</button>
|
|
<button class="artist-tab" data-tab="year" style="background: #f3f3f3; color: #222; border: none; border-radius: 8px; padding: 0.4em 1em; font-weight: 500; cursor: pointer;">This Year</button>
|
|
<button class="artist-tab" data-tab="all" style="background: #f3f3f3; color: #222; border: none; border-radius: 8px; padding: 0.4em 1em; font-weight: 500; cursor: pointer;">All Time</button>
|
|
</div>
|
|
<div id="artists-all" style="display:none;">
|
|
<% if @top_artists_all_time.present? %>
|
|
<ol style="padding-left: 1.2em; margin: 0; width: 100%;">
|
|
<% @top_artists_all_time.each do |artist, count| %>
|
|
<li style="margin-bottom: 0.8em; display: flex; justify-content: space-between; align-items: center;">
|
|
<span><%= artist %></span>
|
|
<span style="color: #888; font-size: 1em;">Plays: <%= count %></span>
|
|
</li>
|
|
<% end %>
|
|
</ol>
|
|
<% else %>
|
|
<div style="color: #888;">No data</div>
|
|
<% end %>
|
|
</div>
|
|
<div id="artists-year" style="display:none;">
|
|
<% if @top_artists_year.present? %>
|
|
<ol style="padding-left: 1.2em; margin: 0; width: 100%;">
|
|
<% @top_artists_year.each do |artist, count| %>
|
|
<li style="margin-bottom: 0.8em; display: flex; justify-content: space-between; align-items: center;">
|
|
<span><%= artist %></span>
|
|
<span style="color: #888; font-size: 1em;">Plays: <%= count %></span>
|
|
</li>
|
|
<% end %>
|
|
</ol>
|
|
<% else %>
|
|
<div style="color: #888;">No data</div>
|
|
<% end %>
|
|
</div>
|
|
<div id="artists-upcoming" style="padding-left: 1.2em; margin: 0; width: 100%;">
|
|
<% if @top_artists_upcoming.present? %>
|
|
<ol style="padding-left: 1.2em; margin: 0; width: 100%;">
|
|
<% @top_artists_upcoming.each do |artist, count| %>
|
|
<li style="margin-bottom: 0.8em; display: flex; justify-content: space-between; align-items: center;">
|
|
<span><%= artist %></span>
|
|
<span style="color: #888; font-size: 1em;">Plays: <%= count %></span>
|
|
</li>
|
|
<% end %>
|
|
</ol>
|
|
<% else %>
|
|
<div style="color: #888;">No data</div>
|
|
<% end %>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tabs = document.querySelectorAll('.artist-tab');
|
|
const views = {
|
|
all: document.getElementById('artists-all'),
|
|
year: document.getElementById('artists-year'),
|
|
upcoming: document.getElementById('artists-upcoming'),
|
|
};
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
tabs.forEach(t => {
|
|
t.style.background = '#f3f3f3';
|
|
t.style.color = '#222';
|
|
});
|
|
this.style.background = '#e8f0fe';
|
|
this.style.color = '#0071e3';
|
|
Object.keys(views).forEach(k => views[k].style.display = 'none');
|
|
views[this.dataset.tab].style.display = '';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|