Spaces:

Reaperxxxx
/

chat

Running

App Files Files Community

Reaperxxxx commited on Dec 30, 2024

Commit

ee5c484

verified ·

1 Parent(s): b37b962

Update index.html

Browse files

Files changed (1) hide show

index.html +46 -34

index.html CHANGED Viewed

@@ -1,41 +1,53 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login / Sign Up</title>
-    <link rel="stylesheet" href="style.css"> <!-- Link to external CSS -->
-</head>
 <body>
-    <form id="authForm" enctype="multipart/form-data">
-        <input type="text" name="username" placeholder="Username" required>
-        <input type="password" name="password" placeholder="Password" required>
-        <input type="file" name="profilePicture">
-        <button type="submit">Login / Sign Up</button>
-    </form>
     <script>
-        document.getElementById('authForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const formData = new FormData(e.target);
-            const res = await fetch('/api/auth', {
-                method: 'POST',
-                body: formData,
             });
-            const data = await res.json();
-            if (data.success) {
-                const profilePicture = formData.get('profilePicture');
-                if (profilePicture.size > 0) {
-                    const pictureForm = new FormData();
-                    pictureForm.append('file', profilePicture);
-                    pictureForm.append('username', data.user.username);
-                    await fetch('/api/profile-picture', { method: 'POST', body: pictureForm });
                 }
-                localStorage.setItem('username', data.user.username);
-                window.location.href = '/home';
-            } else {
-                alert(data.message);
             }
         });
     </script>
-</body>
-</html>

 <body>
+    <div id="posts"></div>
     <script>
+        let page = 0;
+        const limit = 5;
+        async function loadPosts() {
+            const res = await fetch('/api/posts');
+            const posts = await res.json();
+            const paginatedPosts = posts.slice(page * limit, (page + 1) * limit);
+            if (paginatedPosts.length === 0) return;
+            const postsContainer = document.getElementById('posts');
+            paginatedPosts.forEach(post => {
+                const postHTML = `
+                    <div class="post">
+                        <h3>${post.username}</h3>
+                        <p>${post.caption}</p>
+                        ${post.file ? `<img src="${post.file}" alt="Post Image">` : ''}
+                        <button onclick="followUser('${post.username}')">Follow</button>
+                    </div>
+                `;
+                postsContainer.innerHTML += postHTML;
             });
+            page++;
+        }
+        function followUser(target) {
+            const username = localStorage.getItem('username');
+            fetch('/api/follow', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, target }),
+            }).then(res => res.json()).then(data => {
+                if (data.success) {
+                    alert(`You are now following ${target}!`);
+                } else {
+                    alert(data.message);
                 }
+            });
+        }
+        window.addEventListener('scroll', () => {
+            if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+                loadPosts();
             }
         });
+        loadPosts();
     </script>
+</body>