158 lines
6.4 KiB
HTML
158 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OnlyPrompt - Discover Creators</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/community.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="creators-main">
|
|
|
|
<!-- Header / Titel -->
|
|
<div class="creators-header">
|
|
<h1>Discover Creators</h1>
|
|
<p>Follow your favorite prompt artists and get inspired.</p>
|
|
</div>
|
|
|
|
<!-- Filter Buttons -->
|
|
<div class="filter-buttons">
|
|
<button class="filter-btn active">Popular</button>
|
|
<button class="filter-btn">Rising</button>
|
|
<button class="filter-btn">New</button>
|
|
<button class="filter-btn">Top Rated</button>
|
|
</div>
|
|
|
|
<!-- Creators Grid -->
|
|
<div class="creators-grid">
|
|
|
|
<!-- Creator Card 1 -->
|
|
<div class="creator-card">
|
|
<img src="../images/content/creator1.png" alt="Sarah Jenkins" class="creator-avatar">
|
|
<div class="creator-info">
|
|
<h3 class="creator-name">Sarah Jenkins</h3>
|
|
<div class="creator-handle">@sarahj</div>
|
|
<p class="creator-bio">AI Explorer | Prompt Curator | Exploring creativity through generative AI.</p>
|
|
<div class="creator-stats">
|
|
<span><i class="bi bi-puzzle"></i> 42 prompts</span>
|
|
<span><i class="bi bi-star-fill"></i> 4.9</span>
|
|
</div>
|
|
<button class="follow-btn">Follow</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Creator Card 2 -->
|
|
<div class="creator-card">
|
|
<img src="../images/content/creator2.png" alt="Alex Chen" class="creator-avatar">
|
|
<div class="creator-info">
|
|
<h3 class="creator-name">Alex Chen</h3>
|
|
<div class="creator-handle">@alexchen</div>
|
|
<p class="creator-bio">Digital artist & prompt engineer. Creating surreal landscapes.</p>
|
|
<div class="creator-stats">
|
|
<span><i class="bi bi-puzzle"></i> 87 prompts</span>
|
|
<span><i class="bi bi-star-fill"></i> 4.8</span>
|
|
</div>
|
|
<button class="follow-btn">Follow</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Creator Card 3 -->
|
|
<div class="creator-card">
|
|
<img src="../images/content/creator3.png" alt="Mia Wong" class="creator-avatar">
|
|
<div class="creator-info">
|
|
<h3 class="creator-name">Mia Wong</h3>
|
|
<div class="creator-handle">@miawong</div>
|
|
<p class="creator-bio">Midjourney master | UI/UX prompts | Design systems.</p>
|
|
<div class="creator-stats">
|
|
<span><i class="bi bi-puzzle"></i> 124 prompts</span>
|
|
<span><i class="bi bi-star-fill"></i> 5.0</span>
|
|
</div>
|
|
<button class="follow-btn">Follow</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Creator Card 4 -->
|
|
<div class="creator-card">
|
|
<img src="../images/content/creator4.png" alt="Tom Rivera" class="creator-avatar">
|
|
<div class="creator-info">
|
|
<h3 class="creator-name">Tom Rivera</h3>
|
|
<div class="creator-handle">@tomrivera</div>
|
|
<p class="creator-bio">3D artist | Character design | Sci-fi & fantasy prompts.</p>
|
|
<div class="creator-stats">
|
|
<span><i class="bi bi-puzzle"></i> 33 prompts</span>
|
|
<span><i class="bi bi-star-fill"></i> 4.7</span>
|
|
</div>
|
|
<button class="follow-btn">Follow</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Creator Card 5 -->
|
|
<div class="creator-card">
|
|
<img src="../images/content/creator5.png" alt="Emma Watson" class="creator-avatar">
|
|
<div class="creator-info">
|
|
<h3 class="creator-name">Emma Watson</h3>
|
|
<div class="creator-handle">@emmawatson</div>
|
|
<p class="creator-bio">Watercolor & pet portraits | Whimsical art prompts.</p>
|
|
<div class="creator-stats">
|
|
<span><i class="bi bi-puzzle"></i> 56 prompts</span>
|
|
<span><i class="bi bi-star-fill"></i> 4.9</span>
|
|
</div>
|
|
<button class="follow-btn">Follow</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Creator Card 6 -->
|
|
<div class="creator-card">
|
|
<img src="../images/content/creator6.png" alt="Liam O'Brien" class="creator-avatar">
|
|
<div class="creator-info">
|
|
<h3 class="creator-name">Liam O'Brien</h3>
|
|
<div class="creator-handle">@liamob</div>
|
|
<p class="creator-bio">Minimalist logo designer | Brand identity prompts.</p>
|
|
<div class="creator-stats">
|
|
<span><i class="bi bi-puzzle"></i> 28 prompts</span>
|
|
<span><i class="bi bi-star-fill"></i> 4.6</span>
|
|
</div>
|
|
<button class="follow-btn">Follow</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</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');
|
|
});
|
|
// Set 'active' on the third link (Community)
|
|
const thirdLink = document.querySelectorAll('#sidebar-container .sidebar li a')[2];
|
|
if (thirdLink) thirdLink.classList.add('active');
|
|
});
|
|
|
|
fetch('../html/topbar.html')
|
|
.then(r => r.text())
|
|
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
|
</script>
|
|
</body>
|
|
</html> |