163 lines
7.5 KiB
HTML
163 lines
7.5 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 - Feed</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/dashboard.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="feed-main">
|
||
|
||
<!-- Optional: Feed Header -->
|
||
<div class="feed-header">
|
||
<h1>Feed</h1>
|
||
<p>Latest prompts and inspiration from creators you follow</p>
|
||
</div>
|
||
|
||
<!-- Filter Buttons (optional) -->
|
||
<div class="filter-buttons">
|
||
<button class="filter-btn active">For You</button>
|
||
<button class="filter-btn">Following</button>
|
||
<button class="filter-btn">Trending</button>
|
||
<button class="filter-btn">Recent</button>
|
||
</div>
|
||
|
||
<!-- Posts Grid (einfach als Liste / Grid – hier als Grid wie Marketplace) -->
|
||
<div class="posts-grid">
|
||
|
||
<!-- Post 1 -->
|
||
<div class="post-card" onclick="location.href='post-detail.html?id=1'">
|
||
<div class="post-header">
|
||
<img src="../images/content/creator1.png" alt="Sarah Jenkins" class="post-avatar">
|
||
<div class="post-author">
|
||
<span class="post-name">Sarah Jenkins</span>
|
||
<span class="post-handle">@sarahj</span>
|
||
</div>
|
||
<span class="post-date">2 hours ago</span>
|
||
</div>
|
||
<div class="post-content">
|
||
<h3 class="post-title">Conceptual Landscape Art</h3>
|
||
<p class="post-description">Enchanting, vintage, antique vibes. A journey through surreal landscapes.</p>
|
||
<img src="../images/content/feed1.png" alt="Conceptual Landscape" class="post-image">
|
||
</div>
|
||
<!-- Like, Comment, Share, Save Buttons -->
|
||
<div class="post-actions">
|
||
<button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
|
||
<button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
|
||
<button class="action-btn share-btn"><i class="bi bi-share"></i></button>
|
||
<button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Post 2 -->
|
||
<div class="post-card" onclick="location.href='post-detail.html?id=2'">
|
||
<div class="post-header">
|
||
<img src="../images/content/creator2.png" alt="Alex Chen" class="post-avatar">
|
||
<div class="post-author">
|
||
<span class="post-name">Alex Chen</span>
|
||
<span class="post-handle">@alexchen</span>
|
||
</div>
|
||
<span class="post-date">Yesterday</span>
|
||
</div>
|
||
<div class="post-content">
|
||
<h3 class="post-title">Minimalist Logo Design</h3>
|
||
<p class="post-description">Clean, modern, minimalist logo for tech startups.</p>
|
||
<img src="../images/content/feed2.png" alt="Minimalist Logo" class="post-image">
|
||
</div>
|
||
<!-- Like, Comment, Share, Save Buttons -->
|
||
<div class="post-actions">
|
||
<button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
|
||
<button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
|
||
<button class="action-btn share-btn"><i class="bi bi-share"></i></button>
|
||
<button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Post 3 -->
|
||
<div class="post-card" onclick="location.href='post-detail.html?id=3'">
|
||
<div class="post-header">
|
||
<img src="../images/content/creator3.png" alt="Mia Wong" class="post-avatar">
|
||
<div class="post-author">
|
||
<span class="post-name">Mia Wong</span>
|
||
<span class="post-handle">@miawong</span>
|
||
</div>
|
||
<span class="post-date">3 days ago</span>
|
||
</div>
|
||
<div class="post-content">
|
||
<h3 class="post-title">Futuristic Cityscape</h3>
|
||
<p class="post-description">Cyberpunk neon city with flying cars and rain.</p>
|
||
<img src="../images/content/feed3.png" alt="Cityscape" class="post-image">
|
||
</div>
|
||
<!-- Like, Comment, Share, Save Buttons -->
|
||
<div class="post-actions">
|
||
<button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
|
||
<button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
|
||
<button class="action-btn share-btn"><i class="bi bi-share"></i></button>
|
||
<button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Post 4 -->
|
||
<div class="post-card" onclick="location.href='post-detail.html?id=4'">
|
||
<div class="post-header">
|
||
<img src="../images/content/creator4.png" alt="Tom Rivera" class="post-avatar">
|
||
<div class="post-author">
|
||
<span class="post-name">Tom Rivera</span>
|
||
<span class="post-handle">@tomrivera</span>
|
||
</div>
|
||
<span class="post-date">5 days ago</span>
|
||
</div>
|
||
<div class="post-content">
|
||
<h3 class="post-title">Watercolor Pet Portrait</h3>
|
||
<p class="post-description">Soft watercolor style, cute pet portrait.</p>
|
||
<img src="../images/content/feed4.png" alt="Watercolor Pet" class="post-image">
|
||
</div>
|
||
<!-- Like, Comment, Share, Save Buttons -->
|
||
<div class="post-actions">
|
||
<button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
|
||
<button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
|
||
<button class="action-btn share-btn"><i class="bi bi-share"></i></button>
|
||
<button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
|
||
</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 first link (Dashboard) - index 0
|
||
const firstLink = document.querySelectorAll('#sidebar-container .sidebar li a')[0];
|
||
if (firstLink) firstLink.classList.add('active');
|
||
});
|
||
|
||
fetch('../html/topbar.html')
|
||
.then(r => r.text())
|
||
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
||
</script>
|
||
</body>
|
||
</html> |