111 lines
4.9 KiB
HTML
111 lines
4.9 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">
|
|
<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 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 style="font-size:2rem;font-weight:700;margin-bottom:4px;">Sunny the Cat</h1>
|
|
<div style="color:#64748b;margin-bottom:8px;">
|
|
@sunny_the_cat <i class="bi bi-patch-check-fill" style="color:#3b82f6;"></i>
|
|
</div>
|
|
|
|
<div style="margin-bottom:8px;">
|
|
🐾 Cat prompt creator | Nap enthusiast | AI Cat Content Curator<br>
|
|
Chasing lasers and building purrfect prompts.
|
|
</div>
|
|
|
|
<div style="color:#64748b;">Cat City, Dreamland 🐈</div>
|
|
</div>
|
|
|
|
<div style="display:flex;flex-direction:column;gap:10px;">
|
|
<button class="login-button">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('../html/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('../html/topbar.html')
|
|
.then(r => r.text())
|
|
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
|
</script>
|
|
</body>
|
|
</html> |