194 lines
7.9 KiB
Plaintext
194 lines
7.9 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title data-text="title">Asteroid Radio - User Profile</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
|
|
<script src="/asteroid/static/js/auth-ui.js"></script>
|
|
<script src="/asteroid/static/js/profile.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>👤 USER PROFILE</h1>
|
|
<div class="nav">
|
|
<a href="/asteroid">Home</a>
|
|
<a href="/asteroid/player">Player</a>
|
|
<a href="/asteroid/admin" data-show-if-admin>Admin</a>
|
|
<a href="/asteroid/logout" class="btn-logout">Logout</a>
|
|
</div>
|
|
|
|
<!-- User Profile Header -->
|
|
<div class="admin-section">
|
|
<h2>🎧 User Profile</h2>
|
|
<div class="profile-info">
|
|
<div class="info-group">
|
|
<span class="info-label">Username:</span>
|
|
<span class="info-value" data-text="username">user</span>
|
|
</div>
|
|
<div class="info-group">
|
|
<span class="info-label">Role:</span>
|
|
<span class="info-value" data-text="user-role">listener</span>
|
|
</div>
|
|
<div class="info-group">
|
|
<span class="info-label">Member Since:</span>
|
|
<span class="info-value" data-text="join-date">2024-01-01</span>
|
|
</div>
|
|
<div class="info-group">
|
|
<span class="info-label">Last Active:</span>
|
|
<span class="info-value" data-text="last-active">Today</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Listening Statistics -->
|
|
<div class="admin-section">
|
|
<h2>📊 Listening Statistics</h2>
|
|
<div class="admin-grid">
|
|
<div class="status-card">
|
|
<h3>Total Listen Time</h3>
|
|
<p class="stat-number" data-text="total-listen-time">0h 0m</p>
|
|
</div>
|
|
<div class="status-card">
|
|
<h3>Tracks Played</h3>
|
|
<p class="stat-number" data-text="tracks-played">0</p>
|
|
</div>
|
|
<div class="status-card">
|
|
<h3>Sessions</h3>
|
|
<p class="stat-number" data-text="session-count">0</p>
|
|
</div>
|
|
<div class="status-card">
|
|
<h3>Favorite Genre</h3>
|
|
<p class="stat-text" data-text="favorite-genre">Unknown</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recently Played Tracks -->
|
|
<div class="admin-section">
|
|
<h2>🎵 Recently Played</h2>
|
|
<div class="tracks-list" id="recent-tracks">
|
|
<div class="track-item">
|
|
<div class="track-info">
|
|
<span class="track-title" data-text="recent-track-1-title">No recent tracks</span>
|
|
<span class="track-artist" data-text="recent-track-1-artist"></span>
|
|
</div>
|
|
<div class="track-meta">
|
|
<span class="track-duration" data-text="recent-track-1-duration"></span>
|
|
<span class="track-played-at" data-text="recent-track-1-played-at"></span>
|
|
</div>
|
|
</div>
|
|
<div class="track-item">
|
|
<div class="track-info">
|
|
<span class="track-title" data-text="recent-track-2-title"></span>
|
|
<span class="track-artist" data-text="recent-track-2-artist"></span>
|
|
</div>
|
|
<div class="track-meta">
|
|
<span class="track-duration" data-text="recent-track-2-duration"></span>
|
|
<span class="track-played-at" data-text="recent-track-2-played-at"></span>
|
|
</div>
|
|
</div>
|
|
<div class="track-item">
|
|
<div class="track-info">
|
|
<span class="track-title" data-text="recent-track-3-title"></span>
|
|
<span class="track-artist" data-text="recent-track-3-artist"></span>
|
|
</div>
|
|
<div class="track-meta">
|
|
<span class="track-duration" data-text="recent-track-3-duration"></span>
|
|
<span class="track-played-at" data-text="recent-track-3-played-at"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="profile-actions">
|
|
<button class="btn btn-secondary" onclick="loadMoreRecentTracks()">Load More</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Artists -->
|
|
<div class="admin-section">
|
|
<h2>🎤 Top Artists</h2>
|
|
<div class="artist-stats">
|
|
<div class="artist-item">
|
|
<span class="artist-name" data-text="top-artist-1">Unknown Artist</span>
|
|
<span class="artist-plays" data-text="top-artist-1-plays">0 plays</span>
|
|
</div>
|
|
<div class="artist-item">
|
|
<span class="artist-name" data-text="top-artist-2"></span>
|
|
<span class="artist-plays" data-text="top-artist-2-plays"></span>
|
|
</div>
|
|
<div class="artist-item">
|
|
<span class="artist-name" data-text="top-artist-3"></span>
|
|
<span class="artist-plays" data-text="top-artist-3-plays"></span>
|
|
</div>
|
|
<div class="artist-item">
|
|
<span class="artist-name" data-text="top-artist-4"></span>
|
|
<span class="artist-plays" data-text="top-artist-4-plays"></span>
|
|
</div>
|
|
<div class="artist-item">
|
|
<span class="artist-name" data-text="top-artist-5"></span>
|
|
<span class="artist-plays" data-text="top-artist-5-plays"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Listening Activity Chart -->
|
|
<div class="admin-section">
|
|
<h2>📈 Listening Activity</h2>
|
|
<div class="activity-chart">
|
|
<p>Activity over the last 30 days</p>
|
|
<div class="chart-placeholder">
|
|
<div class="chart-bar" style="height: 20%" data-day="1"></div>
|
|
<div class="chart-bar" style="height: 45%" data-day="2"></div>
|
|
<div class="chart-bar" style="height: 30%" data-day="3"></div>
|
|
<div class="chart-bar" style="height: 60%" data-day="4"></div>
|
|
<div class="chart-bar" style="height: 80%" data-day="5"></div>
|
|
<div class="chart-bar" style="height: 25%" data-day="6"></div>
|
|
<div class="chart-bar" style="height: 40%" data-day="7"></div>
|
|
<!-- More bars would be generated dynamically -->
|
|
</div>
|
|
<p class="chart-note">Listening hours per day</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Actions -->
|
|
<div class="admin-section">
|
|
<h2>⚙️ Profile Settings</h2>
|
|
|
|
<!-- Change Password Form -->
|
|
<div class="form-section">
|
|
<h3>🔒 Change Password</h3>
|
|
<form id="change-password-form" onsubmit="return changePassword(event)">
|
|
<div class="form-group">
|
|
<label for="current-password">Current Password:</label>
|
|
<input type="password" id="current-password" name="current-password" required minlength="8">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="new-password">New Password:</label>
|
|
<input type="password" id="new-password" name="new-password" required minlength="8">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirm-password">Confirm New Password:</label>
|
|
<input type="password" id="confirm-password" name="confirm-password" required minlength="8">
|
|
</div>
|
|
<div id="password-message" class="message"></div>
|
|
<button type="submit" class="btn btn-primary">Change Password</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="profile-actions">
|
|
<button class="btn btn-primary" onclick="editProfile()">✏️ Edit Profile</button>
|
|
<button class="btn btn-secondary" onclick="exportListeningData()">📊 Export Data</button>
|
|
<button class="btn btn-secondary" onclick="clearListeningHistory()">🗑️ Clear History</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize profile page
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadProfileData();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|