145 lines
6.7 KiB
HTML
145 lines
6.7 KiB
HTML
<!-- OnlyPrompt - Profile page:
|
|
- User profile display with avatar, bio, stats, and prompt cards (personal prompts) -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OnlyPrompt - Profile</title>
|
|
<link rel="stylesheet" href="../css/variables.css">
|
|
<link rel="stylesheet" href="../css/base.css">
|
|
<link rel="stylesheet" href="../css/sidebar.css">
|
|
<link rel="stylesheet" href="../css/login.css">
|
|
<link rel="stylesheet" href="../css/topbar.css">
|
|
<link rel="stylesheet" href="../css/profile.css">
|
|
<script src="../js/profile-shared.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
|
|
|
|
<div id="sidebar-container"></div>
|
|
|
|
<div style="flex:1; margin:40px auto; max-width:950px;">
|
|
|
|
<div id="topbar-container"></div>
|
|
|
|
<main class="login-card profile-main" style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:24px;">
|
|
|
|
<section class="profile-header" style="display:flex;align-items:center;gap:32px;border-bottom:1px solid #e5e7eb;padding-bottom:24px;">
|
|
|
|
<img id="profileAvatar" src="../images/content/cat.png" class="profile-avatar" style="width:110px;height:110px;border-radius:50%;object-fit:cover;">
|
|
|
|
<div class="profile-info" style="flex:1;">
|
|
<h1 id="profileDisplayName" style="font-size:2rem;font-weight:700;margin-bottom:4px;">Loading...</h1>
|
|
<div id="profileSlug" style="color:#64748b;margin-bottom:8px;">
|
|
@profile <i class="bi bi-patch-check-fill" style="color:#3b82f6;"></i>
|
|
</div>
|
|
|
|
<div id="profileBio" style="margin-bottom:8px;">
|
|
Loading profile...
|
|
</div>
|
|
|
|
<div id="profileSpecialities" style="color:#64748b;"></div>
|
|
<div id="profileStats" style="display:flex;gap:18px;color:#64748b;margin-top:12px;font-size:0.95rem;">
|
|
<span><strong id="profileRating" style="color:#111827;">0.0</strong> rating</span>
|
|
<span><strong id="profileSubscribers" style="color:#111827;">0</strong> subscribers</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;flex-direction:column;gap:10px;">
|
|
<button class="login-button" onclick="location.href='settings.html'">Edit Profile</button>
|
|
<button class="login-button" style="background:#f3f4f6;color:#111;box-shadow:none;">Share Profile</button>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<nav style="display:flex;gap:24px;border-bottom:2px solid #e5e7eb;margin:32px 0 18px 0;">
|
|
<a href="#" style="padding:10px 0;color:#3b82f6;font-weight:600;border-bottom:2px solid #3b82f6;">My Prompts (2)</a>
|
|
<a href="#" style="padding:10px 0;color:#64748b;">Favorites (15)</a>
|
|
<a href="#" style="padding:10px 0;color:#64748b;">Saved (7)</a>
|
|
</nav>
|
|
|
|
<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;">
|
|
|
|
<div style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:18px;display:flex;gap:16px;">
|
|
<img src="../images/content/post1.png" style="width:60px;height:60px;border-radius:12px;">
|
|
<div>
|
|
<div style="font-weight:700;">Galactic Catventure</div>
|
|
<div style="color:#64748b;margin-bottom:6px;">A cosmic journey of a curious cat exploring the stars.</div>
|
|
<div style="display:flex;gap:16px;color:#64748b;">
|
|
<span><i class="bi bi-heart"></i> 128</span>
|
|
<span><i class="bi bi-chat"></i> 15</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:18px;display:flex;gap:16px;">
|
|
<img src="../images/content/post2.png" style="width:60px;height:60px;border-radius:12px;">
|
|
<div>
|
|
<div style="font-weight:700;">Minimalist Cat Logo</div>
|
|
<div style="color:#64748b;margin-bottom:6px;">Sleek logo design for feline fans.</div>
|
|
<div style="display:flex;gap:16px;color:#64748b;">
|
|
<span><i class="bi bi-heart"></i> 54</span>
|
|
<span><i class="bi bi-chat"></i> 6</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
fetch('/sidebar.html')
|
|
.then(r => r.text())
|
|
.then(data => {
|
|
document.getElementById('sidebar-container').innerHTML = data;
|
|
// Remove 'active' from all sidebar links
|
|
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
|
link.classList.remove('active');
|
|
});
|
|
// Then set 'active' only on the My Profile link
|
|
const profileLink = document.querySelector('#sidebar-container a[href="profile.html"]');
|
|
if (profileLink) profileLink.classList.add('active');
|
|
});
|
|
|
|
fetch('/topbar.html')
|
|
.then(r => r.text())
|
|
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
|
|
|
const profileAvatar = document.getElementById('profileAvatar');
|
|
const profileDisplayName = document.getElementById('profileDisplayName');
|
|
const profileSlug = document.getElementById('profileSlug');
|
|
const profileBio = document.getElementById('profileBio');
|
|
const profileSpecialities = document.getElementById('profileSpecialities');
|
|
const profileRating = document.getElementById('profileRating');
|
|
const profileSubscribers = document.getElementById('profileSubscribers');
|
|
|
|
async function loadOwnProfile() {
|
|
try {
|
|
const profile = await window.loadCurrentProfile();
|
|
profileDisplayName.textContent = profile.displayName || 'My Profile';
|
|
profileSlug.innerHTML = `@${profile.user?.userName || profile.slug || 'profile'} <i class="bi bi-patch-check-fill" style="color:#3b82f6;"></i>`;
|
|
profileBio.textContent = profile.bio || 'No bio yet.';
|
|
profileSpecialities.textContent = profile.specialities || 'No specialities added yet.';
|
|
profileRating.textContent = Number(profile.averageRating || 0).toFixed(1);
|
|
profileSubscribers.textContent = profile.subscribers || 0;
|
|
|
|
if (profile.avatarUrl) {
|
|
profileAvatar.src = profile.avatarUrl;
|
|
}
|
|
} catch (error) {
|
|
profileDisplayName.textContent = 'Profile unavailable';
|
|
profileBio.textContent = error.message;
|
|
}
|
|
}
|
|
|
|
loadOwnProfile();
|
|
</script>
|
|
</body>
|
|
</html>
|