114 lines
4.5 KiB
HTML
114 lines
4.5 KiB
HTML
<!-- OnlyPrompt - Settings page:
|
|
- User preferences with tabs for profile, security, and notifications -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OnlyPrompt - Post Detail</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/post-detail.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; display: flex; flex-direction: column;">
|
|
|
|
<div id="topbar-container"></div>
|
|
|
|
<main class="post-detail-main">
|
|
<div class="post-detail-container">
|
|
<!-- Header -->
|
|
<div class="post-header">
|
|
<h1 class="post-title">Marketing Guru: Campaign Strategist</h1>
|
|
<div class="post-meta">
|
|
<span class="category">Marketing</span>
|
|
<span class="category">Business</span>
|
|
<span class="category">Copywriting</span>
|
|
<span class="updated">Updated: Oct 26, 2023</span>
|
|
</div>
|
|
<div class="post-stats">
|
|
<span><i class="bi bi-bookmark-star"></i> 2,109 Saves</span>
|
|
<span><i class="bi bi-eye"></i> 14.5k Views</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prompt Content Section -->
|
|
<div class="prompt-section">
|
|
<h2>PROMPT</h2>
|
|
<div class="prompt-content">
|
|
<p>You are an expert marketing strategist and copywriter. I will provide a product name, target audience, and key benefits. Your goal is to create a comprehensive marketing campaign plan, including:</p>
|
|
<ul>
|
|
<li>Campaign objectives</li>
|
|
<li>Target Audience: [User Input]</li>
|
|
<li>Expected Output: A detailed marketing plan with channel strategy, messaging, and sample copy</li>
|
|
<li>Budget considerations and KPIs</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rating & Like -->
|
|
<div class="rating-section">
|
|
<div class="rating-stars">
|
|
<span><i class="bi bi-star-fill"></i> 4.9</span>
|
|
<span><i class="bi bi-star-fill"></i> 4.8 (241 Ratings)</span>
|
|
</div>
|
|
<button class="like-btn"><i class="bi bi-heart"></i> Like (212)</button>
|
|
</div>
|
|
|
|
<!-- Example Output Section -->
|
|
<div class="example-section">
|
|
<h2>EXAMPLE OUTPUT</h2>
|
|
<div class="example-content">
|
|
<h3>Generated Strategy 16px</h3>
|
|
<div class="example-output-text">
|
|
<p><strong>Output: EcoWare Campaign</strong></p>
|
|
<p><strong>Campaign Overview</strong><br>Target Persona: Sarah Jenkins, 28, Eco-conscious</p>
|
|
<p><strong>Key Messaging</strong><br>Channel Strategy<br>Sample Copy<br>Social<br>Email</p>
|
|
</div>
|
|
<!-- Optional example image (if uploaded in create) -->
|
|
<div class="example-image" style="display: none;">
|
|
<img src="#" alt="Example Output Image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Unlock / Buy Section -->
|
|
<div class="unlock-section">
|
|
<button class="unlock-btn">Unlock Full Prompt • $19.99</button>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Fetch sidebar and topbar
|
|
fetch('../html/sidebar.html')
|
|
.then(r => r.text())
|
|
.then(data => {
|
|
document.getElementById('sidebar-container').innerHTML = data;
|
|
// Remove active class from all sidebar links
|
|
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
|
link.classList.remove('active');
|
|
});
|
|
// Optionally set active on a relevant link (e.g., Marketplace)
|
|
const marketplaceLink = document.querySelector('#sidebar-container a[href="marketplace.html"]');
|
|
if (marketplaceLink) marketplaceLink.classList.add('active');
|
|
});
|
|
|
|
fetch('../html/topbar.html')
|
|
.then(r => r.text())
|
|
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
|
</script>
|
|
</body>
|
|
</html> |