Spaces:

walolorj
/

socialsphere

Running

App Files Files Community

walolorj commited on Oct 29, 2025

Commit

5b47b4a

verified ·

1 Parent(s): c72ea8a

tüm sayfaları işlevsel hale getirip üyelik sistemi ve post paylaşmayı sağlar mısın?

Browse files

Files changed (5) hide show

auth.html +73 -0
components/navbar.js +11 -5
index.html +17 -1
script.js +340 -19
style.css +9 -1

auth.html ADDED Viewed

	@@ -0,0 +1,73 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Auth | SocialSphere</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50">
+    <div class="min-h-screen flex items-center justify-center p-4">
+        <div class="w-full max-w-md">
+            <div class="bg-white rounded-xl shadow-lg p-8">
+                <div class="text-center mb-8">
+                    <h1 class="text-3xl font-bold text-blue-600 mb-2">SocialSphere</h1>
+                    <p class="text-gray-500">Connect with friends and the world</p>
+                </div>
+                <div id="auth-forms">
+                    <!-- Login Form -->
+                    <form id="login-form" class="space-y-4">
+                        <h2 class="text-xl font-semibold text-center">Login</h2>
+                        <div>
+                            <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                            <input type="email" id="login-email" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <div>
+                            <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                            <input type="password" id="login-password" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Login</button>
+                        <p class="text-center text-sm text-gray-500">
+                            Don't have an account?
+                            <a href="#" id="show-register" class="text-blue-600 hover:underline">Register</a>
+                        </p>
+                    </form>
+                    <!-- Register Form -->
+                    <form id="register-form" class="space-y-4 hidden">
+                        <h2 class="text-xl font-semibold text-center">Register</h2>
+                        <div>
+                            <label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
+                            <input type="text" id="register-name" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <div>
+                            <label for="register-username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
+                            <input type="text" id="register-username" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <div>
+                            <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                            <input type="email" id="register-email" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <div>
+                            <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                            <input type="password" id="register-password" required class="w-full px-4 py-2 border rounded-lg focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Register</button>
+                        <p class="text-center text-sm text-gray-500">
+                            Already have an account?
+                            <a href="#" id="show-login" class="text-blue-600 hover:underline">Login</a>
+                        </p>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

components/navbar.js CHANGED Viewed

@@ -165,16 +165,22 @@ class CustomNavbar extends HTMLElement {
               <i data-feather="search" class="text-gray-400"></i>
               <input type="text" placeholder="Search...">
             </div>
             <div class="user-actions">
               <button class="notification-btn">
                 <i data-feather="bell"></i>
               </button>
-              <button class="user-btn">
-                <img src="http://static.photos/people/200x200/1" alt="User">
-              </button>
             </div>
-          </div>
         </div>
       </nav>
     `;

               <i data-feather="search" class="text-gray-400"></i>
               <input type="text" placeholder="Search...">
             </div>
             <div class="user-actions">
               <button class="notification-btn">
                 <i data-feather="bell"></i>
               </button>
+              <div class="relative group">
+                <button class="user-btn">
+                  <img src="${currentUser ? currentUser.avatar : 'http://static.photos/people/200x200/1'}" alt="User">
+                </button>
+                <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block">
+                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
+                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
+                  <a href="#" id="logout-btn" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
+                </div>
+              </div>
             </div>
+</div>
         </div>
       </nav>
     `;

index.html CHANGED Viewed

@@ -65,7 +65,23 @@
                     <div class="p-4 border-b">
                         <h2 class="font-bold text-xl">Your Feed</h2>
                     </div>
-                    <div id="feed-container">
                         <!-- Posts will be dynamically loaded here -->
                     </div>
                     <div class="p-4 text-center">

                     <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">

script.js CHANGED Viewed

@@ -1,8 +1,207 @@
-// Sample data for posts
-const samplePosts = [
-    {
-        id: 1,
         user: {
             name: "Sarah Johnson",
             username: "@sarahj",
             avatar: "http://static.photos/people/200x200/4"
@@ -70,20 +269,68 @@ let currentPosts = [];
 // Initialize the feed
 document.addEventListener('DOMContentLoaded', function() {
-    loadPosts();
-    // Load more button event
-    document.getElementById('load-more').addEventListener('click', loadPosts);
-});
 // Load posts into the feed
 function loadPosts() {
     const feedContainer = document.getElementById('feed-container');
-    // Filter out already viewed posts
-    const newPosts = samplePosts.filter(post => !viewedPosts.has(post.id));
-    // If no new posts, show message
     if (newPosts.length === 0) {
         if (feedContainer.children.length === 0) {
             feedContainer.innerHTML = `
@@ -160,14 +407,72 @@ function loadPosts() {
 }
 // Handle post interactions
 function handleInteraction(e) {
     const button = e.currentTarget;
     const action = button.getAttribute('data-action');
     const postId = parseInt(button.getAttribute('data-id'));
-    // Find the post
-    const post = currentPosts.find(p => p.id === postId);
-    if (!post) return;
     // Update UI based on action
     switch(action) {
@@ -196,12 +501,28 @@ function handleInteraction(e) {
         case 'comment':
             // In a real app, this would open comment section
-            alert(`Comment on post by ${post.user.name}`);
-            break;
         case 'share':
             // In a real app, this would open share options
-            alert(`Share post by ${post.user.name}`);
-            break;
     }
 }

+// User management
+let currentUser = null;
+const users = JSON.parse(localStorage.getItem('users')) || [];
+const posts = JSON.parse(localStorage.getItem('posts')) || [];
+// Initialize auth forms
+function initAuthForms() {
+    const loginForm = document.getElementById('login-form');
+    const registerForm = document.getElementById('register-form');
+    const showRegister = document.getElementById('show-register');
+    const showLogin = document.getElementById('show-login');
+    if (loginForm && registerForm && showRegister && showLogin) {
+        showRegister.addEventListener('click', (e) => {
+            e.preventDefault();
+            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', () => {
+        modal.remove();
+    });
+    document.getElementById('post-comment').addEventListener('click', () => {
+        const commentInput = document.getElementById('comment-input');
+        const comment = commentInput.value.trim();
+        if (comment) {
+            // In a real app, you would save the comment
+            alert(`Comment posted: ${comment}`);
+            commentInput.value = '';
+        }
+    });
+}
+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', () => {
+        modal.remove();
+    });
+    modal.querySelectorAll('button').forEach(btn => {
+        if (btn.id !== 'close-share-modal') {
+            btn.addEventListener('click', () => {
+                alert(`Post shared via ${btn.textContent.trim()}`);
+                modal.remove();
+            });
+        }
+    });
+}
+);
+        showLogin.addEventListener('click', (e) => {
+            e.preventDefault();
+            registerForm.classList.add('hidden');
+            loginForm.classList.remove('hidden');
+        });
+        loginForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const email = document.getElementById('login-email').value;
+            const password = document.getElementById('login-password').value;
+            loginUser(email, password);
+        });
+        registerForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const name = document.getElementById('register-name').value;
+            const username = document.getElementById('register-username').value;
+            const email = document.getElementById('register-email').value;
+            const password = document.getElementById('register-password').value;
+            registerUser(name, username, email, password);
+        });
+    }
+}
+function loginUser(email, password) {
+    const user = users.find(u => u.email === email && u.password === password);
+    if (user) {
+        currentUser = user;
+        localStorage.setItem('currentUser', JSON.stringify(user));
+        window.location.href = '/';
+    } else {
+        alert('Invalid credentials');
+    }
+}
+function registerUser(name, username, email, password) {
+    if (users.some(u => u.email === email)) {
+        alert('Email already registered');
+        return;
+    }
+    if (users.some(u => u.username === username)) {
+        alert('Username already taken');
+        return;
+    }
+    const newUser = {
+        id: Date.now(),
+        name,
+        username,
+        email,
+        password,
+        avatar: `http://static.photos/people/200x200/${Math.floor(Math.random() * 100)}`,
+        followers: [],
+        following: []
+    };
+    users.push(newUser);
+    localStorage.setItem('users', JSON.stringify(users));
+    currentUser = newUser;
+    localStorage.setItem('currentUser', JSON.stringify(newUser));
+    window.location.href = '/';
+}
+function logoutUser() {
+    currentUser = null;
+    localStorage.removeItem('currentUser');
+    window.location.href = '/auth.html';
+}
+// Post management
+function createPost(content, image = null) {
+    const newPost = {
+        id: Date.now(),
         user: {
+            name: currentUser.name,
+            username: currentUser.username,
+            avatar: currentUser.avatar
+        },
+        content,
+        image,
+        timestamp: 'Just now',
+        likes: 0,
+        comments: 0,
+        shares: 0,
+        isLiked: false,
+        isSaved: false
+    };
+    posts.unshift(newPost);
+    localStorage.setItem('posts', JSON.stringify(posts));
+    return newPost;
+}
+// Sample data for posts if none exists
+if (posts.length === 0) {
+    const samplePosts = [
+        {
+            id: 1,
+user: {
             name: "Sarah Johnson",
             username: "@sarahj",
             avatar: "http://static.photos/people/200x200/4"
 // Initialize the feed
 document.addEventListener('DOMContentLoaded', function() {
+    // Initialize auth forms if on auth page
+    initAuthForms();
+    // Check if user is logged in
+    const storedUser = localStorage.getItem('currentUser');
+    if (storedUser) {
+        currentUser = JSON.parse(storedUser);
+    } else if (window.location.pathname !== '/auth.html') {
+        window.location.href = '/auth.html';
+        return;
+    }
+    // Initialize UI if on main page
+    if (document.getElementById('feed-container')) {
+        loadPosts();
+        // Load more button event
+        document.getElementById('load-more').addEventListener('click', loadPosts);
+        // Post creation form
+        const postForm = document.getElementById('post-form');
+        if (postForm) {
+            postForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                const content = document.getElementById('post-content').value;
+                const image = document.getElementById('post-image').files[0];
+                if (content.trim() === '') return;
+                if (image) {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        const newPost = createPost(content, e.target.result);
+                        prependPost(newPost);
+                    };
+                    reader.readAsDataURL(image);
+                } else {
+                    const newPost = createPost(content);
+                    prependPost(newPost);
+                }
+                postForm.reset();
+            });
+        }
+        // Add logout functionality
+        const logoutBtn = document.getElementById('logout-btn');
+        if (logoutBtn) {
+            logoutBtn.addEventListener('click', logoutUser);
+        }
+    }
+});
 // Load posts into the feed
 function loadPosts() {
     const feedContainer = document.getElementById('feed-container');
+    // Get posts from local storage
+    const storedPosts = JSON.parse(localStorage.getItem('posts')) || [];
+    // Filter out already viewed posts
+    const newPosts = storedPosts.filter(post => !viewedPosts.has(post.id));
+// If no new posts, show message
     if (newPosts.length === 0) {
         if (feedContainer.children.length === 0) {
             feedContainer.innerHTML = `
 }
 // Handle post interactions
+function prependPost(post) {
+    const feedContainer = document.getElementById('feed-container');
+    const firstChild = feedContainer.firstChild;
+    const postElement = createPostElement(post);
+    if (firstChild) {
+        feedContainer.insertBefore(postElement, firstChild);
+    } else {
+        feedContainer.appendChild(postElement);
+    }
+    viewedPosts.add(post.id);
+    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) {
     const button = e.currentTarget;
     const action = button.getAttribute('data-action');
     const postId = parseInt(button.getAttribute('data-id'));
+    // Find the post in storage
+    const storedPosts = JSON.parse(localStorage.getItem('posts')) || [];
+    const postIndex = storedPosts.findIndex(p => p.id === postId);
+if (!post) return;
     // Update UI based on action
     switch(action) {
         case 'comment':
             // In a real app, this would open comment section
+            // Update storage
+            storedPosts[postIndex] = post;
+            localStorage.setItem('posts', JSON.stringify(storedPosts));
+            // Update current posts
+            const currentPostIndex = currentPosts.findIndex(p => p.id === postId);
+            if (currentPostIndex !== -1) {
+                currentPosts[currentPostIndex] = post;
+            }
+            // Show comment modal
+            showCommentModal(post);
+break;
         case 'share':
             // In a real app, this would open share options
+            // Update storage
+            storedPosts[postIndex] = post;
+            localStorage.setItem('posts', JSON.stringify(storedPosts));
+            // Show share options
+            showShareOptions(post);
+break;
     }
 }

style.css CHANGED Viewed

@@ -46,11 +46,19 @@ body {
   color: var(--primary);
   background-color: #dbeafe;
 }
 .post-content {
   line-height: 1.6;
 }
 .user-avatar {
   transition: transform 0.2s ease;
 }

   color: var(--primary);
   background-color: #dbeafe;
 }
 .post-content {
   line-height: 1.6;
 }
+/* Post form styling */
+#post-form textarea {
+  resize: none;
+}
+/* Dropdown menu */
+.group:hover .group-hover\:block {
+  display: block;
+}
 .user-avatar {
   transition: transform 0.2s ease;
 }