profile.ctml
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title data-text="title">Asteroid Radio - User Profile</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css"> 8 <script src="/asteroid/static/js/auth-ui.js"></script> 9 <script src="/asteroid/static/js/profile.js"></script> 10 </head> 11 <body> 12 <div class="container"> 13 <h1>👤 USER PROFILE</h1> 14 <div class="nav"> 15 <a href="/asteroid">Home</a> 16 <a href="/asteroid/player">Player</a> 17 <a href="/asteroid/admin" data-show-if-admin>Admin</a> 18 <a href="/asteroid/logout" class="btn-logout">Logout</a> 19 </div> 20 21 <!-- User Profile Header --> 22 <div class="admin-section"> 23 <h2>🎧 User Profile</h2> 24 <div class="profile-info"> 25 <div class="info-group"> 26 <span class="info-label">Username:</span> 27 <span class="info-value" data-text="username">user</span> 28 </div> 29 <div class="info-group"> 30 <span class="info-label">Role:</span> 31 <span class="info-value" data-text="user-role">listener</span> 32 </div> 33 <div class="info-group"> 34 <span class="info-label">Member Since:</span> 35 <span class="info-value" data-text="join-date">2024-01-01</span> 36 </div> 37 <div class="info-group"> 38 <span class="info-label">Last Active:</span> 39 <span class="info-value" data-text="last-active">Today</span> 40 </div> 41 </div> 42 </div> 43 44 <!-- Listening Statistics --> 45 <div class="admin-section"> 46 <h2>📊 Listening Statistics</h2> 47 <div class="admin-grid"> 48 <div class="status-card"> 49 <h3>Total Listen Time</h3> 50 <p class="stat-number" data-text="total-listen-time">0h 0m</p> 51 </div> 52 <div class="status-card"> 53 <h3>Tracks Played</h3> 54 <p class="stat-number" data-text="tracks-played">0</p> 55 </div> 56 <div class="status-card"> 57 <h3>Sessions</h3> 58 <p class="stat-number" data-text="session-count">0</p> 59 </div> 60 <div class="status-card"> 61 <h3>Favorite Genre</h3> 62 <p class="stat-text" data-text="favorite-genre">Unknown</p> 63 </div> 64 </div> 65 </div> 66 67 <!-- Recently Played Tracks --> 68 <div class="admin-section"> 69 <h2>🎵 Recently Played</h2> 70 <div class="tracks-list" id="recent-tracks"> 71 <div class="track-item"> 72 <div class="track-info"> 73 <span class="track-title" data-text="recent-track-1-title">No recent tracks</span> 74 <span class="track-artist" data-text="recent-track-1-artist"></span> 75 </div> 76 <div class="track-meta"> 77 <span class="track-duration" data-text="recent-track-1-duration"></span> 78 <span class="track-played-at" data-text="recent-track-1-played-at"></span> 79 </div> 80 </div> 81 <div class="track-item"> 82 <div class="track-info"> 83 <span class="track-title" data-text="recent-track-2-title"></span> 84 <span class="track-artist" data-text="recent-track-2-artist"></span> 85 </div> 86 <div class="track-meta"> 87 <span class="track-duration" data-text="recent-track-2-duration"></span> 88 <span class="track-played-at" data-text="recent-track-2-played-at"></span> 89 </div> 90 </div> 91 <div class="track-item"> 92 <div class="track-info"> 93 <span class="track-title" data-text="recent-track-3-title"></span> 94 <span class="track-artist" data-text="recent-track-3-artist"></span> 95 </div> 96 <div class="track-meta"> 97 <span class="track-duration" data-text="recent-track-3-duration"></span> 98 <span class="track-played-at" data-text="recent-track-3-played-at"></span> 99 </div> 100 </div> 101 </div> 102 <div class="profile-actions"> 103 <button class="btn btn-secondary" onclick="loadMoreRecentTracks()">Load More</button> 104 </div> 105 </div> 106 107 <!-- Top Artists --> 108 <div class="admin-section"> 109 <h2>🎤 Top Artists</h2> 110 <div class="artist-stats"> 111 <div class="artist-item"> 112 <span class="artist-name" data-text="top-artist-1">Unknown Artist</span> 113 <span class="artist-plays" data-text="top-artist-1-plays">0 plays</span> 114 </div> 115 <div class="artist-item"> 116 <span class="artist-name" data-text="top-artist-2"></span> 117 <span class="artist-plays" data-text="top-artist-2-plays"></span> 118 </div> 119 <div class="artist-item"> 120 <span class="artist-name" data-text="top-artist-3"></span> 121 <span class="artist-plays" data-text="top-artist-3-plays"></span> 122 </div> 123 <div class="artist-item"> 124 <span class="artist-name" data-text="top-artist-4"></span> 125 <span class="artist-plays" data-text="top-artist-4-plays"></span> 126 </div> 127 <div class="artist-item"> 128 <span class="artist-name" data-text="top-artist-5"></span> 129 <span class="artist-plays" data-text="top-artist-5-plays"></span> 130 </div> 131 </div> 132 </div> 133 134 <!-- Listening Activity Chart --> 135 <div class="admin-section"> 136 <h2>📈 Listening Activity</h2> 137 <div class="activity-chart"> 138 <p>Activity over the last 30 days</p> 139 <div class="chart-placeholder"> 140 <div class="chart-bar" style="height: 20%" data-day="1"></div> 141 <div class="chart-bar" style="height: 45%" data-day="2"></div> 142 <div class="chart-bar" style="height: 30%" data-day="3"></div> 143 <div class="chart-bar" style="height: 60%" data-day="4"></div> 144 <div class="chart-bar" style="height: 80%" data-day="5"></div> 145 <div class="chart-bar" style="height: 25%" data-day="6"></div> 146 <div class="chart-bar" style="height: 40%" data-day="7"></div> 147 <!-- More bars would be generated dynamically --> 148 </div> 149 <p class="chart-note">Listening hours per day</p> 150 </div> 151 </div> 152 153 <!-- Profile Actions --> 154 <div class="admin-section"> 155 <h2>⚙️ Profile Settings</h2> 156 157 <!-- Change Password Form --> 158 <div class="form-section"> 159 <h3>🔒 Change Password</h3> 160 <form id="change-password-form" onsubmit="return changePassword(event)"> 161 <div class="form-group"> 162 <label for="current-password">Current Password:</label> 163 <input type="password" id="current-password" name="current-password" required minlength="8"> 164 </div> 165 <div class="form-group"> 166 <label for="new-password">New Password:</label> 167 <input type="password" id="new-password" name="new-password" required minlength="8"> 168 </div> 169 <div class="form-group"> 170 <label for="confirm-password">Confirm New Password:</label> 171 <input type="password" id="confirm-password" name="confirm-password" required minlength="8"> 172 </div> 173 <div id="password-message" class="message"></div> 174 <button type="submit" class="btn btn-primary">Change Password</button> 175 </form> 176 </div> 177 178 <div class="profile-actions"> 179 <button class="btn btn-primary" onclick="editProfile()">✏️ Edit Profile</button> 180 <button class="btn btn-secondary" onclick="exportListeningData()">📊 Export Data</button> 181 <button class="btn btn-secondary" onclick="clearListeningHistory()">🗑️ Clear History</button> 182 </div> 183 </div> 184 </div> 185 186 <script> 187 // Initialize profile page 188 document.addEventListener('DOMContentLoaded', function() { 189 loadProfileData(); 190 }); 191 </script> 192 </body> 193 </html>