185 lines
7.6 KiB
HTML
185 lines
7.6 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 - 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">
|
|
</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 Buttons -->
|
|
<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>
|
|
|
|
<!-- 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> |