Spaces:

walolorj
/

socialsphere

Running

App Files Files Community

walolorj commited on Oct 29, 2025

Commit

8dbb3cf

verified ·

1 Parent(s): 5b47b4a

make it a social media app

Browse files

Files changed (4) hide show

components/stories.js +102 -0
index.html +112 -69
script.js +112 -62
style.css +18 -6

components/stories.js ADDED Viewed

	@@ -0,0 +1,102 @@

+class CustomStories extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .stories-container {
+          display: flex;
+          gap: 0.75rem;
+          padding: 1rem;
+          overflow-x: auto;
+          scrollbar-width: none;
+        }
+        .stories-container::-webkit-scrollbar {
+          display: none;
+        }
+        .story {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          flex-shrink: 0;
+        }
+        .story-avatar {
+          width: 3.5rem;
+          height: 3.5rem;
+          border-radius: 9999px;
+          padding: 0.125rem;
+          background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+        }
+        .story-avatar-inner {
+          width: 100%;
+          height: 100%;
+          border-radius: 9999px;
+          border: 2px solid white;
+          overflow: hidden;
+        }
+        .story-avatar-inner img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        .story-username {
+          margin-top: 0.25rem;
+          font-size: 0.75rem;
+          text-align: center;
+        }
+        .add-story {
+          position: relative;
+          width: 3.5rem;
+          height: 3.5rem;
+          border-radius: 9999px;
+          background: #f1f5f9;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .add-story-icon {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          width: 1.25rem;
+          height: 1.25rem;
+          background: #3b82f6;
+          border-radius: 9999px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+        }
+      </style>
+      <div class="stories-container">
+        <div class="story">
+          <div class="add-story">
+            <img src="http://static.photos/people/200x200/1" width="100%" height="100%" style="border-radius: 9999px;">
+            <div class="add-story-icon">
+              <i data-feather="plus" width="12" height="12"></i>
+            </div>
+          </div>
+          <span class="story-username">Your Story</span>
+        </div>
+        ${[1,2,3,4,5].map(i => `
+          <div class="story">
+            <div class="story-avatar">
+              <div class="story-avatar-inner">
+                <img src="http://static.photos/people/200x200/${i+10}">
+              </div>
+            </div>
+            <span class="story-username">user${i}</span>
+          </div>
+        `).join('')}
+      </div>
+    `;
+    // Initialize Feather icons
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace({ shadowRoot: this.shadowRoot });
+      }
+    }, 100);
+  }
+}
+customElements.define('custom-stories', CustomStories);

index.html CHANGED Viewed

@@ -11,8 +11,8 @@
 </head>
 <body class="bg-gray-50 text-gray-900">
     <custom-navbar></custom-navbar>
-    <main class="container mx-auto px-4 py-8">
         <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
             <!-- Left Sidebar -->
             <div class="lg:col-span-1">
@@ -60,97 +60,140 @@
             </div>
             <!-- Feed -->
-            <div class="lg:col-span-2">
-                <div class="bg-white rounded-xl shadow mb-6">
-                    <div class="p-4 border-b">
-                        <h2 class="font-bold text-xl">Your Feed</h2>
-                    </div>
-                    <!-- Post creation form -->
-                    <div class="p-4 border-b">
-                        <form id="post-form" class="space-y-4">
-                            <textarea id="post-content" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="What's on your mind?"></textarea>
-                            <div class="flex items-center justify-between">
-                                <div>
-                                    <input type="file" id="post-image" accept="image/*" class="hidden">
-                                    <button type="button" onclick="document.getElementById('post-image').click()" class="text-gray-500 hover:text-blue-500">
-                                        <i data-feather="image"></i>
-                                    </button>
                                 </div>
-                                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">Post</button>
                             </div>
-                        </form>
-                    </div>
-<div id="feed-container">
-                        <!-- Posts will be dynamically loaded here -->
                     </div>
-                    <div class="p-4 text-center">
-                        <button id="load-more" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
-                            Load More
                         </button>
                     </div>
-                </div>
             </div>
             <!-- Right Sidebar -->
-            <div class="lg:col-span-1">
-                <div class="bg-white rounded-xl shadow p-6 mb-6">
-                    <h3 class="font-bold text-lg mb-4">Suggested For You</h3>
                     <div class="space-y-4">
-                        <div class="flex items-center">
-                            <img src="http://static.photos/people/200x200/2" alt="User" class="w-10 h-10 rounded-full">
-                            <div class="ml-3">
-                                <p class="font-medium">Jamie Smith</p>
-                                <p class="text-sm text-gray-500">Popular Creator</p>
-                            </div>
-                            <button class="ml-auto text-blue-500 hover:text-blue-700">
-                                <i data-feather="user-plus"></i>
-                            </button>
-                        </div>
-                        <div class="flex items-center">
-                            <img src="http://static.photos/people/200x200/3" alt="User" class="w-10 h-10 rounded-full">
-                            <div class="ml-3">
-                                <p class="font-medium">Tech Insights</p>
-                                <p class="text-sm text-gray-500">Technology</p>
                             </div>
-                            <button class="ml-auto text-blue-500 hover:text-blue-700">
-                                <i data-feather="user-plus"></i>
-                            </button>
                         </div>
                     </div>
                 </div>
                 <div class="bg-white rounded-xl shadow p-6">
-                    <h3 class="font-bold text-lg mb-4">Analytics</h3>
                     <div class="space-y-4">
-                        <div>
-                            <div class="flex justify-between mb-1">
-                                <span class="text-sm font-medium">Profile Views</span>
-                                <span class="text-sm font-medium">78%</span>
-                            </div>
-                            <div class="w-full bg-gray-200 rounded-full h-2">
-                                <div class="bg-blue-600 h-2 rounded-full" style="width: 78%"></div>
-                            </div>
                         </div>
-                        <div>
-                            <div class="flex justify-between mb-1">
-                                <span class="text-sm font-medium">Post Engagement</span>
-                                <span class="text-sm font-medium">64%</span>
-                            </div>
-                            <div class="w-full bg-gray-200 rounded-full h-2">
-                                <div class="bg-green-600 h-2 rounded-full" style="width: 64%"></div>
                             </div>
-                        </div>
                     </div>
                 </div>
             </div>
-        </div>
     </main>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
-    <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();

 </head>
 <body class="bg-gray-50 text-gray-900">
     <custom-navbar></custom-navbar>
+    <custom-stories></custom-stories>
+<main class="container mx-auto px-4 py-8">
         <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
             <!-- Left Sidebar -->
             <div class="lg:col-span-1">
             </div>
             <!-- Feed -->
+    <div class="lg:col-span-2">
+        <div class="bg-white rounded-xl shadow mb-6">
+            <div class="p-4 border-b">
+                <h2 class="font-bold text-xl">Your Feed</h2>
+            </div>
+            <!-- Stories -->
+            <div class="p-4 border-b">
+                <div class="flex space-x-4 overflow-x-auto pb-2">
+                    <div class="flex flex-col items-center space-y-1 flex-shrink-0">
+                        <div class="relative">
+                            <div class="w-16 h-16 rounded-full bg-gradient-to-tr from-yellow-400 to-pink-500 p-0.5">
+                                <div class="bg-white rounded-full p-0.5">
+                                    <img src="http://static.photos/people/200x200/1" class="w-full h-full rounded-full object-cover">
                                 </div>
                             </div>
+                            <div class="absolute bottom-0 right-0 bg-blue-500 rounded-full w-5 h-5 flex items-center justify-center border-2 border-white">
+                                <i data-feather="plus" class="w-3 h-3 text-white"></i>
+                            </div>
+                        </div>
+                        <span class="text-xs">Your Story</span>
                     </div>
+                    ${[1,2,3,4,5].map(i => `
+                        <div class="flex flex-col items-center space-y-1 flex-shrink-0">
+                            <div class="w-16 h-16 rounded-full bg-gradient-to-tr from-purple-500 to-pink-500 p-0.5">
+                                <img src="http://static.photos/people/200x200/${i+10}" class="w-full h-full rounded-full object-cover">
+                            </div>
+                            <span class="text-xs">user${i}</span>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+            <!-- Post creation form -->
+            <div class="p-4 border-b">
+                <div class="flex items-center mb-4">
+                    <img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full">
+                    <input type="text" id="post-content" class="ml-2 flex-1 px-4 py-2 bg-gray-100 rounded-full focus:outline-none" placeholder="What's on your mind?">
+                </div>
+                <div class="flex justify-between border-t pt-3">
+                    <button type="button" onclick="document.getElementById('post-image').click()" class="flex items-center text-gray-500 hover:text-blue-500 px-3 py-1 rounded-lg hover:bg-gray-100">
+                        <i data-feather="image" class="w-5 h-5 mr-1"></i>
+                        <span>Photo</span>
+                        <input type="file" id="post-image" accept="image/*" class="hidden">
+                    </button>
+                    <button type="button" class="flex items-center text-gray-500 hover:text-blue-500 px-3 py-1 rounded-lg hover:bg-gray-100">
+                        <i data-feather="video" class="w-5 h-5 mr-1"></i>
+                        <span>Video</span>
+                    </button>
+                    <button type="button" class="flex items-center text-gray-500 hover:text-blue-500 px-3 py-1 rounded-lg hover:bg-gray-100">
+                        <i data-feather="map-pin" class="w-5 h-5 mr-1"></i>
+                        <span>Location</span>
+                    </button>
+                    <button type="submit" form="post-form" class="px-4 py-1 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition">Post</button>
+                </div>
+                <form id="post-form" class="hidden"></form>
+            </div>
+<div id="feed-container" class="divide-y">
+    <!-- Posts will be dynamically loaded here -->
+</div>
+                    <div class="p-4 flex justify-center">
+                        <button id="load-more" class="flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition">
+                            <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>
+                            <span>Load More</span>
                         </button>
                     </div>
+</div>
             </div>
             <!-- Right Sidebar -->
+            <div class="lg:col-span-1 space-y-6">
+                <div class="bg-white rounded-xl shadow p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="font-bold text-lg">Suggested For You</h3>
+                        <a href="#" class="text-sm text-blue-500">See All</a>
+                    </div>
                     <div class="space-y-4">
+                        ${[1,2,3].map(i => `
+                            <div class="flex items-center">
+                                <img src="http://static.photos/people/200x200/${i+20}" alt="User" class="w-10 h-10 rounded-full">
+                                <div class="ml-3 flex-1">
+                                    <p class="font-medium">User ${i}</p>
+                                    <p class="text-sm text-gray-500">Followed by ${i*2} friends</p>
+                                </div>
+                                <button class="text-xs font-medium text-blue-500 hover:text-blue-700">
+                                    Follow
+                                </button>
                             </div>
+                        `).join('')}
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow p-6">
+                    <h3 class="font-bold text-lg mb-4">Birthdays</h3>
+                    <div class="flex items-center">
+                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500">
+                            <i data-feather="gift"></i>
                         </div>
+                        <p class="ml-3 text-sm"><span class="font-medium">John Doe</span> and <span class="font-medium">2 others</span> have birthdays today</p>
                     </div>
                 </div>
                 <div class="bg-white rounded-xl shadow p-6">
+                    <h3 class="font-bold text-lg mb-4">Sponsored</h3>
                     <div class="space-y-4">
+                        <div class="relative">
+                            <img src="http://static.photos/advertising/640x360/1" class="w-full rounded-lg">
+                            <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">Sponsored</div>
                         </div>
+                        <p class="text-sm">Try our new product and get 50% off your first purchase!</p>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow p-6">
+                    <h3 class="font-bold text-lg mb-4">Online Friends</h3>
+                    <div class="space-y-3">
+                        ${[1,2,3,4].map(i => `
+                            <div class="flex items-center">
+                                <div class="relative">
+                                    <img src="http://static.photos/people/200x200/${i+30}" class="w-10 h-10 rounded-full">
+                                    <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
+                                </div>
+                                <span class="ml-3">Friend ${i}</span>
                             </div>
+                        `).join('')}
                     </div>
                 </div>
             </div>
+</div>
     </main>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
+    <script src="components/stories.js"></script>
+<script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();

script.js CHANGED Viewed

@@ -17,30 +17,53 @@ function initAuthForms() {
             loginForm.classList.add('hidden');
             registerForm.classList.remove('hidden');
 }
 function showCommentModal(post) {
     const modal = document.createElement('div');
     modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
     modal.innerHTML = `
-        <div class="bg-white rounded-xl p-6 max-w-md w-full max-h-[80vh] overflow-y-auto">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-xl font-bold">Comments</h3>
                 <button class="text-gray-500 hover:text-gray-700" id="close-comment-modal">
                     <i data-feather="x"></i>
                 </button>
             </div>
-            <div class="space-y-4 mb-4" id="comments-container">
-                ${post.comments > 0 ? '' : '<p class="text-gray-500 text-center py-4">No comments yet</p>'}
             </div>
-            <div class="flex items-center">
-                <input type="text" placeholder="Add a comment..." class="flex-1 px-4 py-2 border rounded-l-lg focus:ring-blue-500 focus:border-blue-500" id="comment-input">
-                <button class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition" id="post-comment">
-                    <i data-feather="send"></i>
-                </button>
             </div>
         </div>
     `;
-    document.body.appendChild(modal);
     feather.replace();
     document.getElementById('close-comment-modal').addEventListener('click', () => {
@@ -57,35 +80,60 @@ function showCommentModal(post) {
         }
     });
 }
 function showShareOptions(post) {
     const modal = document.createElement('div');
     modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
     modal.innerHTML = `
-        <div class="bg-white rounded-xl p-6 max-w-md w-full">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-xl font-bold">Share Post</h3>
-                <button class="text-gray-500 hover:text-gray-700" id="close-share-modal">
-                    <i data-feather="x"></i>
-                </button>
             </div>
-            <div class="space-y-4">
-                <button class="w-full flex items-center justify-center gap-2 px-4 py-2 border rounded-lg hover:bg-gray-50">
-                    <i data-feather="copy"></i>
-                    <span>Copy Link</span>
                 </button>
-                <button class="w-full flex items-center justify-center gap-2 px-4 py-2 border rounded-lg hover:bg-gray-50">
-                    <i data-feather="twitter"></i>
-                    <span>Share on Twitter</span>
                 </button>
-                <button class="w-full flex items-center justify-center gap-2 px-4 py-2 border rounded-lg hover:bg-gray-50">
-                    <i data-feather="facebook"></i>
-                    <span>Share on Facebook</span>
                 </button>
             </div>
         </div>
     `;
-    document.body.appendChild(modal);
     feather.replace();
     document.getElementById('close-share-modal').addEventListener('click', () => {
@@ -423,45 +471,47 @@ function prependPost(post) {
     currentPosts.unshift(post);
     feather.replace();
 }
 function createPostElement(post) {
     const postElement = document.createElement('div');
-    postElement.className = 'post-card bg-white border-b last:border-b-0 fade-in';
     postElement.innerHTML = `
-        <div class="p-6">
-            <div class="flex items-start">
-                <img src="${post.user.avatar}" alt="${post.user.name}" class="w-12 h-12 rounded-full user-avatar">
-                <div class="ml-4 flex-1">
-                    <div class="flex items-center">
-                        <h3 class="font-bold">${post.user.name}</h3>
-                        <span class="ml-2 text-gray-500 text-sm">${post.user.username}</span>
-                        <span class="mx-2 text-gray-300">•</span>
-                        <span class="text-gray-500 text-sm">${post.timestamp}</span>
-                    </div>
-                    <p class="mt-2 post-content">${post.content}</p>
-                    ${post.image ? `<img src="${post.image}" alt="Post image" class="mt-4 rounded-xl w-full">` : ''}
-                    <div class="mt-4 flex space-x-6">
-                        <button class="interaction-btn ${post.isLiked ? 'active' : ''}" data-action="like" data-id="${post.id}">
-                            <i data-feather="heart" class="w-4 h-4"></i>
-                            <span>${post.likes}</span>
-                        </button>
-                        <button class="interaction-btn" data-action="comment" data-id="${post.id}">
-                            <i data-feather="message-circle" class="w-4 h-4"></i>
-                            <span>${post.comments}</span>
-                        </button>
-                        <button class="interaction-btn" data-action="share" data-id="${post.id}">
-                            <i data-feather="share-2" class="w-4 h-4"></i>
-                            <span>${post.shares}</span>
-                        </button>
-                        <button class="interaction-btn ml-auto ${post.isSaved ? 'active' : ''}" data-action="save" data-id="${post.id}">
-                            <i data-feather="bookmark" class="w-4 h-4"></i>
-                        </button>
-                    </div>
                 </div>
             </div>
         </div>
     `;
-    return postElement;
 }
 function handleInteraction(e) {

             loginForm.classList.add('hidden');
             registerForm.classList.remove('hidden');
 }
 function showCommentModal(post) {
     const modal = document.createElement('div');
     modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
     modal.innerHTML = `
+        <div class="bg-white rounded-lg w-full max-w-lg max-h-[90vh] flex flex-col">
+            <div class="p-4 border-b flex items-center justify-between">
+                <h3 class="text-lg font-semibold">Comments</h3>
                 <button class="text-gray-500 hover:text-gray-700" id="close-comment-modal">
                     <i data-feather="x"></i>
                 </button>
             </div>
+            <div class="p-4 border-b">
+                <div class="flex items-start">
+                    <img src="${post.user.avatar}" class="w-8 h-8 rounded-full">
+                    <div class="ml-3">
+                        <div class="flex items-center">
+                            <span class="font-medium">${post.user.name}</span>
+                            <span class="mx-1 text-gray-500">•</span>
+                            <span class="text-gray-500 text-sm">${post.timestamp}</span>
+                        </div>
+                        <p class="mt-1">${post.content}</p>
+                    </div>
+                </div>
             </div>
+            <div class="flex-1 overflow-y-auto p-4 space-y-4" id="comments-container">
+                ${post.comments > 0 ? '' : `
+                <div class="text-center py-8">
+                    <i data-feather="message-circle" class="w-12 h-12 mx-auto text-gray-300"></i>
+                    <p class="mt-2 text-gray-500">No comments yet</p>
+                    <p class="text-sm text-gray-400">Be the first to share your thoughts!</p>
+                </div>
+                `}
+            </div>
+            <div class="p-4 border-t">
+                <div class="flex items-center">
+                    <img src="http://static.photos/people/200x200/1" class="w-8 h-8 rounded-full">
+                    <div class="ml-2 flex-1 flex items-center bg-gray-100 rounded-full">
+                        <input type="text" placeholder="Add a comment..." class="flex-1 bg-transparent px-4 py-2 focus:outline-none" id="comment-input">
+                        <button class="text-blue-500 px-3" id="post-comment">
+                            <i data-feather="send" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
     `;
+document.body.appendChild(modal);
     feather.replace();
     document.getElementById('close-comment-modal').addEventListener('click', () => {
         }
     });
 }
 function showShareOptions(post) {
     const modal = document.createElement('div');
     modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
     modal.innerHTML = `
+        <div class="bg-white rounded-lg w-full max-w-sm">
+            <div class="p-4 border-b">
+                <h3 class="text-lg font-semibold">Share Post</h3>
             </div>
+            <div class="p-4 space-y-2">
+                <button class="w-full flex items-center px-4 py-3 rounded-lg hover:bg-gray-100">
+                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
+                        <i data-feather="user-plus" class="w-5 h-5"></i>
+                    </div>
+                    <div class="ml-4 text-left">
+                        <p class="font-medium">Send in a message</p>
+                        <p class="text-sm text-gray-500">Share privately with friends</p>
+                    </div>
                 </button>
+                <button class="w-full flex items-center px-4 py-3 rounded-lg hover:bg-gray-100">
+                    <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500">
+                        <i data-feather="twitter" class="w-5 h-5"></i>
+                    </div>
+                    <div class="ml-4 text-left">
+                        <p class="font-medium">Share on Twitter</p>
+                        <p class="text-sm text-gray-500">Post to Twitter</p>
+                    </div>
+                </button>
+                <button class="w-full flex items-center px-4 py-3 rounded-lg hover:bg-gray-100">
+                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
+                        <i data-feather="facebook" class="w-5 h-5"></i>
+                    </div>
+                    <div class="ml-4 text-left">
+                        <p class="font-medium">Share on Facebook</p>
+                        <p class="text-sm text-gray-500">Post to Facebook</p>
+                    </div>
                 </button>
+                <button class="w-full flex items-center px-4 py-3 rounded-lg hover:bg-gray-100">
+                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500">
+                        <i data-feather="link" class="w-5 h-5"></i>
+                    </div>
+                    <div class="ml-4 text-left">
+                        <p class="font-medium">Copy link</p>
+                        <p class="text-sm text-gray-500">Copy post link</p>
+                    </div>
+                </button>
+            </div>
+            <div class="p-4 border-t">
+                <button id="close-share-modal" class="w-full py-2 text-gray-700 rounded-lg hover:bg-gray-100">
+                    Cancel
                 </button>
             </div>
         </div>
     `;
+document.body.appendChild(modal);
     feather.replace();
     document.getElementById('close-share-modal').addEventListener('click', () => {
     currentPosts.unshift(post);
     feather.replace();
 }
 function createPostElement(post) {
     const postElement = document.createElement('div');
+    postElement.className = 'post-card fade-in p-4';
     postElement.innerHTML = `
+        <div class="flex items-start">
+            <img src="${post.user.avatar}" alt="${post.user.name}" class="w-10 h-10 rounded-full user-avatar">
+            <div class="ml-3 flex-1">
+                <div class="flex items-center">
+                    <h3 class="font-bold">${post.user.name}</h3>
+                    <span class="mx-2 text-gray-300">•</span>
+                    <span class="text-gray-500 text-sm">${post.timestamp}</span>
+                    <button class="ml-auto text-gray-400 hover:text-gray-600">
+                        <i data-feather="more-horizontal"></i>
+                    </button>
+                </div>
+                <p class="mt-2 post-content">${post.content}</p>
+                ${post.image ? `
+                <div class="mt-3 rounded-xl overflow-hidden border">
+                    <img src="${post.image}" alt="Post image" class="w-full">
+                </div>
+                ` : ''}
+                <div class="flex justify-between mt-3 pt-3 border-t">
+                    <button class="interaction-btn ${post.isLiked ? 'active' : ''}" data-action="like" data-id="${post.id}">
+                        <i data-feather="heart" class="w-5 h-5"></i>
+                        <span>${post.likes}</span>
+                    </button>
+                    <button class="interaction-btn" data-action="comment" data-id="${post.id}">
+                        <i data-feather="message-circle" class="w-5 h-5"></i>
+                        <span>${post.comments}</span>
+                    </button>
+                    <button class="interaction-btn" data-action="share" data-id="${post.id}">
+                        <i data-feather="share-2" class="w-5 h-5"></i>
+                    </button>
+                    <button class="interaction-btn ml-auto ${post.isSaved ? 'active' : ''}" data-action="save" data-id="${post.id}">
+                        <i data-feather="bookmark" class="w-5 h-5"></i>
+                    </button>
                 </div>
             </div>
         </div>
     `;
+return postElement;
 }
 function handleInteraction(e) {

style.css CHANGED Viewed

@@ -18,16 +18,18 @@ body {
   background-color: #f1f5f9;
   color: #1e293b;
 }
 .post-card {
   transition: all 0.3s ease;
 }
-.post-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
 .interaction-btn {
   display: flex;
   align-items: center;
@@ -36,15 +38,25 @@ body {
   border-radius: 20px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 .interaction-btn:hover {
   background-color: #e2e8f0;
 }
 .interaction-btn.active {
-  color: var(--primary);
-  background-color: #dbeafe;
 }
 .post-content {
   line-height: 1.6;

   background-color: #f1f5f9;
   color: #1e293b;
 }
 .post-card {
   transition: all 0.3s ease;
+  border-bottom: 1px solid #e2e8f0;
 }
+.post-card:last-child {
+  border-bottom: none;
 }
+.post-card:hover {
+  background-color: #f8fafc;
+}
 .interaction-btn {
   display: flex;
   align-items: center;
   border-radius: 20px;
   cursor: pointer;
   transition: all 0.2s ease;
+  color: #64748b;
 }
 .interaction-btn:hover {
   background-color: #e2e8f0;
+  color: #3b82f6;
 }
 .interaction-btn.active {
+  color: #ef4444;
+}
+.interaction-btn.active:hover {
+  background-color: #fee2e2;
+}
+/* Stories */
+.story-ring {
+  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
 }
 .post-content {
   line-height: 1.6;