237 lines
9.1 KiB
HTML
237 lines
9.1 KiB
HTML
<!-- OnlyPrompt - Marketplace page:
|
||
- Browse and filter AI prompts with buy/view details buttons and pricing
|
||
- Added sort dropdown (Best Rating, Price Low to High, Price High to Low) - UI only -->
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>OnlyPrompt - Marketplace</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/marketplace.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||
<style>
|
||
/* Additional inline style for sort dropdown – can be moved to marketplace.css */
|
||
.filter-sort-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
padding-bottom: 16px;
|
||
}
|
||
.filter-buttons {
|
||
margin-bottom: 0;
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
}
|
||
.sort-dropdown {
|
||
background: #f8fafc;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 30px;
|
||
padding: 8px 16px;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
color: #334155;
|
||
cursor: pointer;
|
||
outline: none;
|
||
}
|
||
.sort-dropdown:hover {
|
||
border-color: #94a3b8;
|
||
}
|
||
@media (max-width: 700px) {
|
||
.filter-sort-row {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
.sort-dropdown {
|
||
align-self: flex-start;
|
||
}
|
||
}
|
||
</style>
|
||
</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="marketplace-main">
|
||
|
||
<!-- Header -->
|
||
<div class="marketplace-header">
|
||
<h1>Marketplace</h1>
|
||
<p>Browse and discover high-quality AI prompts</p>
|
||
</div>
|
||
|
||
<!-- Filter + Sort Row -->
|
||
<div class="filter-sort-row">
|
||
<div class="filter-buttons">
|
||
<button class="filter-btn active">All</button>
|
||
<button class="filter-btn">Writing</button>
|
||
<button class="filter-btn">Coding</button>
|
||
<button class="filter-btn">Art</button>
|
||
<button class="filter-btn">Marketing</button>
|
||
<button class="filter-btn">Video</button>
|
||
<button class="filter-btn">Data</button>
|
||
</div>
|
||
<select class="sort-dropdown" aria-label="Sort prompts">
|
||
<option value="best">Best Rating</option>
|
||
<option value="price_low">Price: Low to High</option>
|
||
<option value="price_high">Price: High to Low</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Prompts Grid -->
|
||
<div class="prompts-grid">
|
||
|
||
<!-- Prompt Card 1 -->
|
||
<div class="prompt-card">
|
||
<img src="../images/content/market1.png" alt="Creative Blog Post Generator" class="prompt-img">
|
||
<div class="prompt-info">
|
||
<h3 class="prompt-title">Creative Blog Post Generator</h3>
|
||
<div class="prompt-author">@JaneDoe</div>
|
||
<p class="prompt-description">Generate engaging blog posts in minutes to captivate your audience.</p>
|
||
<div class="prompt-rating">
|
||
<span><i class="bi bi-star-fill"></i> 4.8</span>
|
||
<span>(124 reviews)</span>
|
||
</div>
|
||
<div class="prompt-price">$19.99</div>
|
||
<div class="prompt-actions">
|
||
<button class="buy-btn">Buy Now</button>
|
||
<button class="details-btn">View Details</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Prompt Card 2 -->
|
||
<div class="prompt-card">
|
||
<img src="../images/content/market2.png" alt="Python Code Assistant" class="prompt-img">
|
||
<div class="prompt-info">
|
||
<h3 class="prompt-title">Python Code Assistant</h3>
|
||
<div class="prompt-author">@JaneDoe</div>
|
||
<p class="prompt-description">Efficiently debug and write Python code with AI assistance.</p>
|
||
<div class="prompt-rating">
|
||
<span><i class="bi bi-star-fill"></i> 4.7</span>
|
||
<span>(98 reviews)</span>
|
||
</div>
|
||
<div class="prompt-price">$19.99</div>
|
||
<div class="prompt-actions">
|
||
<button class="buy-btn">Buy Now</button>
|
||
<button class="details-btn">View Details</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Prompt Card 3 -->
|
||
<div class="prompt-card">
|
||
<img src="../images/content/market3.png" alt="Digital Art Style Guide" class="prompt-img">
|
||
<div class="prompt-info">
|
||
<h3 class="prompt-title">Digital Art Style Guide</h3>
|
||
<div class="prompt-author">@JaneDoe</div>
|
||
<p class="prompt-description">Create stunning digital art styles with this comprehensive guide.</p>
|
||
<div class="prompt-rating">
|
||
<span><i class="bi bi-star-fill"></i> 4.8</span>
|
||
<span>(156 reviews)</span>
|
||
</div>
|
||
<div class="prompt-price">$19.99</div>
|
||
<div class="prompt-actions">
|
||
<button class="buy-btn">Buy Now</button>
|
||
<button class="details-btn">View Details</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Prompt Card 4 -->
|
||
<div class="prompt-card">
|
||
<img src="../images/content/market4.png" alt="Marketing Copywriter" class="prompt-img">
|
||
<div class="prompt-info">
|
||
<h3 class="prompt-title">Marketing Copywriter</h3>
|
||
<div class="prompt-author">@JaneDoe</div>
|
||
<p class="prompt-description">Generate engaging marketing copy in minutes.</p>
|
||
<div class="prompt-rating">
|
||
<span><i class="bi bi-star-fill"></i> 4.8</span>
|
||
<span>(112 reviews)</span>
|
||
</div>
|
||
<div class="prompt-price">$19.99</div>
|
||
<div class="prompt-actions">
|
||
<button class="buy-btn">Buy Now</button>
|
||
<button class="details-btn">View Details</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Prompt Card 5 -->
|
||
<div class="prompt-card">
|
||
<img src="../images/content/market5.png" alt="Midjourney Image Prompts" class="prompt-img">
|
||
<div class="prompt-info">
|
||
<h3 class="prompt-title">Midjourney Image Prompts</h3>
|
||
<div class="prompt-author">@JaneDoe</div>
|
||
<p class="prompt-description">Curated prompts for stunning Midjourney images.</p>
|
||
<div class="prompt-rating">
|
||
<span><i class="bi bi-star-fill"></i> 4.7</span>
|
||
<span>(203 reviews)</span>
|
||
</div>
|
||
<div class="prompt-price">$19.99</div>
|
||
<div class="prompt-actions">
|
||
<button class="buy-btn">Buy Now</button>
|
||
<button class="details-btn">View Details</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Prompt Card 6 -->
|
||
<div class="prompt-card">
|
||
<img src="../images/content/market6.png" alt="UI Design Assistant" class="prompt-img">
|
||
<div class="prompt-info">
|
||
<h3 class="prompt-title">UI Design Assistant</h3>
|
||
<div class="prompt-author">@JaneDoe</div>
|
||
<p class="prompt-description">Generate UI components and design systems with AI.</p>
|
||
<div class="prompt-rating">
|
||
<span><i class="bi bi-star-fill"></i> 4.9</span>
|
||
<span>(87 reviews)</span>
|
||
</div>
|
||
<div class="prompt-price">$19.99</div>
|
||
<div class="prompt-actions">
|
||
<button class="buy-btn">Buy Now</button>
|
||
<button class="details-btn">View Details</button>
|
||
</div>
|
||
</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 second link (Marketplace) - index 1
|
||
const secondLink = document.querySelectorAll('#sidebar-container .sidebar li a')[1];
|
||
if (secondLink) secondLink.classList.add('active');
|
||
});
|
||
|
||
fetch('../html/topbar.html')
|
||
.then(r => r.text())
|
||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||
</script>
|
||
</body>
|
||
</html> |