181 lines
7.6 KiB
HTML
181 lines
7.6 KiB
HTML
<!-- OnlyPrompt - Create Prompt page:
|
||
- Form to publish new AI prompts with title, description, category, content, example output, image upload, and pricing toggle -->
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>OnlyPrompt - Create New Prompt</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/create.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="create-main">
|
||
<div class="create-container">
|
||
<div class="create-header">
|
||
<h1>Create AI Prompt</h1>
|
||
<p>Design and save custom prompts for your AI workflows.</p>
|
||
</div>
|
||
|
||
<form id="createPromptForm" class="create-form" enctype="multipart/form-data">
|
||
<!-- Title -->
|
||
<div class="form-group">
|
||
<label for="title">Prompt Title *</label>
|
||
<input type="text" id="title" name="title" placeholder="e.g., Write an inspiring startup story about innovation" required>
|
||
</div>
|
||
|
||
<!-- Description -->
|
||
<div class="form-group">
|
||
<label for="description">Description *</label>
|
||
<textarea id="description" name="description" rows="2" placeholder="Draft a narrative about a small team overcoming challenges to launch a groundbreaking app" required></textarea>
|
||
</div>
|
||
|
||
<!-- Category -->
|
||
<div class="form-group">
|
||
<label for="category">Category *</label>
|
||
<select id="category" name="category" required>
|
||
<option value="creative-writing">Creative Writing</option>
|
||
<option value="coding">Coding</option>
|
||
<option value="art">Art</option>
|
||
<option value="marketing">Marketing</option>
|
||
<option value="video">Video</option>
|
||
<option value="data">Data</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Prompt Content -->
|
||
<div class="form-group">
|
||
<label for="promptContent">Prompt Content *</label>
|
||
<textarea id="promptContent" name="promptContent" rows="6" placeholder="Write your prompt instructions here..." required></textarea>
|
||
<small class="form-hint">Use clear, step-by-step instructions for the AI.</small>
|
||
</div>
|
||
|
||
<!-- Example Output (Text) -->
|
||
<div class="form-group">
|
||
<label for="exampleOutput">Example Output (optional)</label>
|
||
<textarea id="exampleOutput" name="exampleOutput" rows="4" placeholder="Show an example of what the AI might generate..."></textarea>
|
||
</div>
|
||
|
||
<!-- Example Image (optional) -->
|
||
<div class="form-group">
|
||
<label for="exampleImage">Example Image (optional)</label>
|
||
<input type="file" id="exampleImage" name="exampleImage" accept="image/png, image/jpeg, image/jpg">
|
||
<small class="form-hint">Upload a PNG or JPG – preview will appear below.</small>
|
||
<div id="imagePreview" style="margin-top: 10px; display: none;">
|
||
<img id="previewImg" src="#" alt="Preview" style="max-width: 100%; max-height: 200px; border-radius: 12px;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pricing (with toggle) -->
|
||
<div class="form-group pricing-group">
|
||
<label>Pricing</label>
|
||
<div class="pricing-toggle">
|
||
<button type="button" id="freeBtn" class="price-option active">Free</button>
|
||
<button type="button" id="paidBtn" class="price-option">Paid</button>
|
||
</div>
|
||
<div id="priceField" style="display: none;">
|
||
<input type="number" id="price" name="price" step="0.01" min="0" placeholder="Price in USD (e.g., 19.99)">
|
||
</div>
|
||
<small class="form-hint">You can set a price later or keep it free.</small>
|
||
</div>
|
||
|
||
<!-- Submit Button -->
|
||
<div class="form-actions">
|
||
<button type="submit" class="submit-btn">Publish Prompt</button>
|
||
<button type="button" class="cancel-btn">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Toggle between free and paid
|
||
const freeBtn = document.getElementById('freeBtn');
|
||
const paidBtn = document.getElementById('paidBtn');
|
||
const priceField = document.getElementById('priceField');
|
||
const priceInput = document.getElementById('price');
|
||
|
||
freeBtn.addEventListener('click', () => {
|
||
freeBtn.classList.add('active');
|
||
paidBtn.classList.remove('active');
|
||
priceField.style.display = 'none';
|
||
priceInput.removeAttribute('required');
|
||
});
|
||
paidBtn.addEventListener('click', () => {
|
||
paidBtn.classList.add('active');
|
||
freeBtn.classList.remove('active');
|
||
priceField.style.display = 'block';
|
||
priceInput.setAttribute('required', 'required');
|
||
});
|
||
|
||
// Image preview for example image
|
||
const imageInput = document.getElementById('exampleImage');
|
||
const imagePreview = document.getElementById('imagePreview');
|
||
const previewImg = document.getElementById('previewImg');
|
||
|
||
if (imageInput) {
|
||
imageInput.addEventListener('change', function(event) {
|
||
const file = event.target.files[0];
|
||
if (file && (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg')) {
|
||
const reader = new FileReader();
|
||
reader.onload = function(e) {
|
||
previewImg.src = e.target.result;
|
||
imagePreview.style.display = 'block';
|
||
};
|
||
reader.readAsDataURL(file);
|
||
} else {
|
||
imagePreview.style.display = 'none';
|
||
previewImg.src = '#';
|
||
if (file) alert('Please upload a PNG or JPG image.');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Handle form submission (demo only)
|
||
document.getElementById('createPromptForm').addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
alert('Prompt published! (Demo)');
|
||
// Here you would normally send data to a backend (including the image file)
|
||
});
|
||
|
||
// Cancel button (go back)
|
||
document.querySelector('.cancel-btn').addEventListener('click', () => {
|
||
window.history.back();
|
||
});
|
||
|
||
// 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 "Create New" if it exists, otherwise keep none
|
||
const createLink = document.querySelector('#sidebar-container a[href="create.html"]');
|
||
if (createLink) createLink.classList.add('active');
|
||
});
|
||
|
||
fetch('../html/topbar.html')
|
||
.then(r => r.text())
|
||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||
</script>
|
||
</body>
|
||
</html> |