diff --git a/css/marketplace.css b/css/marketplace.css new file mode 100644 index 0000000..d177eca --- /dev/null +++ b/css/marketplace.css @@ -0,0 +1,189 @@ +/* Marketplace Page - Prompt cards, filter buttons, full width layout */ + +/* Full width layout */ +.layout > div[style*="flex:1"] { + margin: 0 !important; + max-width: 100% !important; + padding: 0 !important; + width: 100% !important; +} + +.marketplace-main { + background: transparent !important; + padding: 20px 32px !important; + margin: 0 auto !important; + width: 100%; + max-width: 1400px; +} + +/* Header centering */ +.marketplace-header { + text-align: center; + margin-bottom: 24px; +} +.marketplace-header h1 { + font-size: 2rem; + font-weight: 700; + margin-bottom: 8px; +} +.marketplace-header p { + color: #64748b; + font-size: 1rem; +} + +/* Filter buttons - centered */ +.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; +} + +/* Prompts grid */ +.prompts-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 24px; +} + +/* Prompt card */ +.prompt-card { + background: #fff; + border-radius: 18px; + box-shadow: 0 2px 8px rgba(59,130,246,0.06); + overflow: hidden; + transition: transform 0.2s, box-shadow 0.2s; + display: flex; + flex-direction: column; +} +.prompt-card:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(59,130,246,0.12); +} + +.prompt-img { + width: 100%; + height: 160px; + object-fit: cover; +} + +.prompt-info { + padding: 16px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.prompt-title { + font-size: 1.2rem; + font-weight: 700; + margin: 0; +} + +.prompt-author { + color: #64748b; + font-size: 0.85rem; +} + +.prompt-description { + color: #334155; + font-size: 0.85rem; + line-height: 1.4; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.prompt-rating { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.85rem; + color: #f59e0b; +} +.prompt-rating span:first-child i { + color: #f59e0b; +} +.prompt-rating span:last-child { + color: #64748b; +} + +.prompt-price { + font-size: 1.3rem; + font-weight: 700; + color: #3b82f6; + margin: 8px 0 4px; +} + +.prompt-actions { + display: flex; + gap: 12px; + margin-top: 8px; +} +.buy-btn, .details-btn { + flex: 1; + border: none; + border-radius: 14px; + padding: 8px 12px; + font-size: 0.85rem; + font-weight: 600; + cursor: pointer; + transition: opacity 0.2s; +} +.buy-btn { + background: var(--gradient); + color: white; +} +.details-btn { + background: #f1f5f9; + color: #334155; +} +.buy-btn:hover, .details-btn:hover { + opacity: 0.85; +} + +/* Responsive */ +@media (max-width: 768px) { + .marketplace-main { + padding: 16px !important; + } + .filter-buttons { + gap: 8px; + } + .filter-btn { + padding: 6px 14px; + font-size: 0.8rem; + } +} + +@media (max-width: 480px) { + .marketplace-main { + padding: 12px !important; + } + .prompt-actions { + flex-direction: column; + } +} \ No newline at end of file diff --git a/html/creators.html b/html/creators3.html similarity index 100% rename from html/creators.html rename to html/creators3.html diff --git a/html/marketplace2.html b/html/marketplace2.html new file mode 100644 index 0000000..512372b --- /dev/null +++ b/html/marketplace2.html @@ -0,0 +1,185 @@ + + + + + + OnlyPrompt - Marketplace + + + + + + + + + +
+ + + +
+ +
+ +
+ + +
+

Marketplace

+

Browse and discover high-quality AI prompts

+
+ + +
+ + + + + + + +
+ + +
+ + +
+ Creative Blog Post Generator +
+

Creative Blog Post Generator

+
@JaneDoe
+

Generate engaging blog posts in minutes to captivate your audience.

+
+ 4.8 + (124 reviews) +
+
$19.99
+
+ + +
+
+
+ + +
+ Python Code Assistant +
+

Python Code Assistant

+
@JaneDoe
+

Efficiently debug and write Python code with AI assistance.

+
+ 4.7 + (98 reviews) +
+
$19.99
+
+ + +
+
+
+ + +
+ Digital Art Style Guide +
+

Digital Art Style Guide

+
@JaneDoe
+

Create stunning digital art styles with this comprehensive guide.

+
+ 4.8 + (156 reviews) +
+
$19.99
+
+ + +
+
+
+ + +
+ Marketing Copywriter +
+

Marketing Copywriter

+
@JaneDoe
+

Generate engaging marketing copy in minutes.

+
+ 4.8 + (112 reviews) +
+
$19.99
+
+ + +
+
+
+ + +
+ Midjourney Image Prompts +
+

Midjourney Image Prompts

+
@JaneDoe
+

Curated prompts for stunning Midjourney images.

+
+ 4.7 + (203 reviews) +
+
$19.99
+
+ + +
+
+
+ + +
+ UI Design Assistant +
+

UI Design Assistant

+
@JaneDoe
+

Generate UI components and design systems with AI.

+
+ 4.9 + (87 reviews) +
+
$19.99
+
+ + +
+
+
+ +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/html/profile.html b/html/profile6.html similarity index 100% rename from html/profile.html rename to html/profile6.html diff --git a/images/content/prompt2.png b/images/content/prompt2.png new file mode 100644 index 0000000..146abbc Binary files /dev/null and b/images/content/prompt2.png differ