YES

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>YES – Social Media</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f2f5;
}
.header {
background-color: #4267B2;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
margin: 0;
}
.header input {
padding: 5px;
border-radius: 5px;
border: none;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
padding: 20px;
}
.form-container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
margin-bottom: 20px;
}
.form-container input {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ccc;
}
.form-container button {
width: 100%;
padding: 10px;
background-color: #4267B2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.post-container {
width: 100%;
max-width: 600px;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.post {
margin-bottom: 20px;
}
.post textarea {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.comment {
background-color: #f0f2f5;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class=”header”>
<h1>YES</h1>
<input type=”text” placeholder=”Search…”>
</div>
<div class=”container”>
<div class=”form-container”>
<input type=”email” id=”email” placeholder=”Email”>
<input type=”password” id=”password” placeholder=”Password”>
<button onclick=”signUp()”>Sign Up</button>
<button onclick=”signIn()”>Sign In</button>
</div>
<div class=”post-container”>
<div class=”post”>
<textarea id=”postContent” placeholder=”What’s on your mind?”></textarea>
<button onclick=”addPost()”>Post</button>
</div>
<div id=”postsContainer”></div>
</div>
</div>

<!– Firebase –>
<script src=”https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js”></script>
<script src=”https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js”></script>
<script src=”https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js”></script>
<script>
// Your Firebase configuration
var firebaseConfig = {
apiKey: “YOUR_API_KEY”,
authDomain: “YOUR_PROJECT_ID.firebaseapp.com”,
projectId: “YOUR_PROJECT_ID”,
storageBucket: “YOUR_PROJECT_ID.appspot.com”,
messagingSenderId: “YOUR_MESSAGING_SENDER_ID”,
appId: “YOUR_APP_ID”
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();

// Authentication functions
function signUp() {
const email = document.getElementById(’email’).value;
const password = document.getElementById(‘password’).value;
auth.createUserWithEmailAndPassword(email, password)
.then(user => {
alert(‘User signed up’);
})
.catch(error => {
alert(error.message);
});
}

function signIn() {
const email = document.getElementById(’email’).value;
const password = document.getElementById(‘password’).value;
auth.signInWithEmailAndPassword(email, password)
.then(user => {
alert(‘User signed in’);
loadPosts();
})
.catch(error => {
alert(error.message);
});
}

// Add a new post
function addPost() {
const postContent = document.getElementById(‘postContent’).value;
if (postContent.trim() !== ”) {
const user = auth.currentUser;
if (user) {
db.collection(‘posts’).add({
uid: user.uid,
content: postContent,
timestamp: firebase.firestore.FieldValue.serverTimestamp()
}).then(() => {
document.getElementById(‘postContent’).value = ”;
loadPosts();
}).catch(error => {
alert(error.message);
});
} else {
alert(‘You need to sign in first.’);
}
}
}

// Load all posts
function loadPosts() {
db.collection(‘posts’).orderBy(‘timestamp’, ‘desc’).get()
.then(snapshot => {
const postsContainer = document.getElementById(‘postsContainer’);
postsContainer.innerHTML = ”;
snapshot.forEach(doc => {
const post = doc.data();
const postElement = document.createElement(‘div’);
postElement.className = ‘post’;
postElement.innerHTML = `
<h3>User ${post.uid}</h3>
<p>${post.content}</p>
<textarea placeholder=”Write a comment…” onkeypress=”if(event.keyCode==13) addComment(‘${doc.id}’, this.value)”></textarea>
<div class=”comments” id=”comments-${doc.id}”></div>
`;
postsContainer.appendChild(postElement);
loadComments(doc.id);
});
});
}

// Add a comment to a post
function addComment(postId, commentContent) {
const user = auth.currentUser;
if (user && commentContent.trim() !== ”) {
db.collection(‘posts’).doc(postId).collection(‘comments’).add({
uid: user.uid,
content: commentContent,
timestamp: firebase.firestore.FieldValue.serverTimestamp()
}).then(() => {
loadComments(postId);
}).catch(error => {
alert(error.message);
});
}
}

// Load comments for a post
function loadComments(postId) {
db.collection(‘posts’).doc(postId).collection(‘comments’).orderBy(‘timestamp’).get()
.then(snapshot => {
const commentsContainer = document.getElementById(`comments-${postId}`);
commentsContainer.innerHTML = ”;
snapshot.forEach(doc => {
const comment = doc.data();
const commentElement = document.createElement(‘div’);
commentElement.className = ‘comment’;
commentElement.innerHTML = `
<p><strong>User ${comment.uid}</strong>: ${comment.content}</p>
`;
commentsContainer.appendChild(commentElement);
});
});
}
</script>
</body>
</html>

Scroll to Top