nachbaisabel/frontend_projekt
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

marketplace

Browse Source
This commit is contained in:
Isabelle Nachbaur 2026-04-06 16:30:55 +02:00
parent a4a5d03f9f
commit 7b23b296d3
5 changed files with 374 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
css/marketplace.css Normal file
View File

@ -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;
}
}

0
html/creators.html → html/creators3.html
View File

185
html/marketplace2.html Normal file
View File

@ -0,0 +1,185 @@
<!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/prompt1.jpg" 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/prompt2.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/prompt3.jpg" 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/prompt4.jpg" 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/prompt5.jpg" 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/prompt6.jpg" 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>

0
html/profile.html → html/profile6.html
View File

BIN
images/content/prompt2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB