creators page
This commit is contained in:
parent
11e973ce61
commit
a4a5d03f9f
170
css/creators.css
Normal file
170
css/creators.css
Normal file
@ -0,0 +1,170 @@
|
|||||||
|
/* Creators page - Discover creators, filter buttons, creator cards */
|
||||||
|
|
||||||
|
/* Full width layout */
|
||||||
|
.layout > div[style*="flex:1"] {
|
||||||
|
margin: 0 !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.creators-main {
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 20px 32px !important;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.creators-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.creators-header h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.creators-header p {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filter buttons */
|
||||||
|
.filter-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
.filter-btn {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 20px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #64748b;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 30px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.filter-btn.active {
|
||||||
|
background: var(--gradient);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.filter-btn:hover:not(.active) {
|
||||||
|
background: #f1f5f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Creators grid */
|
||||||
|
.creators-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Creator card */
|
||||||
|
.creator-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 18px;
|
||||||
|
box-shadow: 0 2px 8px rgba(59,130,246,0.06);
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
.creator-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 20px rgba(59,130,246,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.creator-avatar {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.creator-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.creator-name {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.creator-handle {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.creator-bio {
|
||||||
|
color: #334155;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.creator-stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
.creator-stats i {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
.follow-btn {
|
||||||
|
background: var(--gradient);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 6px 16px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.follow-btn:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.creators-main {
|
||||||
|
padding: 16px !important;
|
||||||
|
}
|
||||||
|
.filter-buttons {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.filter-btn {
|
||||||
|
padding: 6px 14px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.creators-main {
|
||||||
|
padding: 12px !important;
|
||||||
|
}
|
||||||
|
.creator-card {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.creator-stats {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.follow-btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
158
html/creators.html
Normal file
158
html/creators.html
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
<!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/creators.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>
|
||||||
BIN
images/content/creator1.png
Normal file
BIN
images/content/creator1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
images/content/creator2.png
Normal file
BIN
images/content/creator2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 579 KiB |
BIN
images/content/creator4.png
Normal file
BIN
images/content/creator4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 143 KiB |
Loading…
x
Reference in New Issue
Block a user