David/SocialMediaApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feedv1

Browse Source
This commit is contained in:
David
2026-01-28 20:29:42 +11:00
parent 5e1ab94a81
commit 0b595e81ed
3 changed files with 426 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
index.html
View File

@@ -52,6 +52,164 @@
<p class="signup-link">Don't have an account? <a href="#">Create One</a></p>
</div>
</main>
<!-- Main Feed View -->
<div id="feed-view" class="hidden">
<!-- Top Header -->
<header class="feed-header">
<div class="header-logo">Social</div>
<div class="header-actions">
<button class="icon-btn">
<svg viewBox="0 0 24 24" width="24" height="24">
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
fill="white" />
</svg>
</button>
</div>
</header>
<!-- Stories Section -->
<section class="stories-container">
<!-- Story Item (Add New) -->
<div class="story-item">
<div class="story-ring add-story">
<div class="story-avatar">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="white" />
</svg>
</div>
</div>
<span>Your Story</span>
</div>
<!-- Placeholders -->
<div class="story-item">
<div class="story-ring"><img src="https://i.pravatar.cc/150?img=1" alt="User" class="story-avatar">
</div>
<span>Sarah</span>
</div>
<div class="story-item">
<div class="story-ring"><img src="https://i.pravatar.cc/150?img=2" alt="User" class="story-avatar">
</div>
<span>Mike</span>
</div>
<div class="story-item">
<div class="story-ring"><img src="https://i.pravatar.cc/150?img=3" alt="User" class="story-avatar">
</div>
<span>Jessica</span>
</div>
<div class="story-item">
<div class="story-ring"><img src="https://i.pravatar.cc/150?img=4" alt="User" class="story-avatar">
</div>
<span>Alex</span>
</div>
</section>
<!-- Feed Section -->
<section class="feed-container">
<!-- Post Card -->
<article class="post-card">
<div class="post-header">
<div class="post-user">
<img src="https://i.pravatar.cc/150?img=1" alt="User" class="avatar-sm">
<span class="username">sarah_j</span>
</div>
<button class="icon-btn-sm">...</button>
</div>
<div class="post-image">
<img src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?w=800&q=80" alt="Post">
</div>
<div class="post-actions">
<div class="action-left">
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white"
fill="none" class="heart-icon">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg></button>
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white"
fill="none">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
</path>
</svg></button>
</div>
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg></button>
</div>
<div class="post-content">
<span class="likes">124 likes</span>
<p><span class="username">sarah_j</span> Exploring the Cinque Terre! 🇮🇹✨</p>
</div>
</article>
<!-- Post Card 2 -->
<article class="post-card">
<div class="post-header">
<div class="post-user">
<img src="https://i.pravatar.cc/150?img=2" alt="User" class="avatar-sm">
<span class="username">mike_photo</span>
</div>
<button class="icon-btn-sm">...</button>
</div>
<div class="post-image">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80" alt="Post">
</div>
<div class="post-actions">
<div class="action-left">
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white"
fill="none" class="heart-icon">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg></button>
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white"
fill="none">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
</path>
</svg></button>
</div>
<button class="icon-btn"><svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg></button>
</div>
<div class="post-content">
<span class="likes">892 likes</span>
<p><span class="username">mike_photo</span> Golden hour in the mountains 🏔️</p>
</div>
</article>
<!-- Spacer for bottom nav -->
<div style="height: 100px;"></div>
</section>
<!-- Bottom Navigation -->
<nav class="bottom-nav">
<button class="nav-btn active">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
<span>Home</span>
</button>
<button class="nav-btn">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="12" y1="8" x2="12" y2="16"></line>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
<span>Post</span>
</button>
<button class="nav-btn">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="white" fill="none">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<span>Chat</span>
</button>
</nav>
</div>
<script src="script.js"></script>
</body>