<!DOCTYPE html>
<html>
<head>
<title>PlayForge Community</title>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore-compat.js"></script>
<style>
body {
background: radial-gradient(circle, #1a0026, #000);
color: white;
font-family: Arial;
text-align: center;
padding-top: 50px;
}
.card {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 20px;
width: 320px;
margin: 20px auto;
}
input, button, textarea {
width: 100%;
padding: 10px;
margin: 8px 0;
border-radius: 10px;
border: none;
}
textarea {
height: 80px;
}
button {
background: linear-gradient(90deg, #8a2be2, #00c3ff);
color: white;
font-weight: bold;
cursor: pointer;
}
.post {
background: #111;
padding: 10px;
margin: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<!-- LOGIN -->
<div id="login" class="card">
<h2>Enter the Forge</h2>
<input type="email" id="email" placeholder="Email">
<input type="password" id="password" placeholder="Password">
<button onclick="signUp()">Start Forging</button>
<button onclick="signIn()">Enter Forge</button>
</div>
<!-- DASHBOARD -->
<div id="dashboard" class="card" style="display:none;">
<h2>Welcome to PlayForge 🔥</h2>
<p id="userEmail"></p>
<!-- Username -->
<input id="username" placeholder="Set username">
<button onclick="saveUsername()">Save Username</button>
<!-- Post -->
<textarea id="postInput" placeholder="Share something..."></textarea>
<button onclick="createPost()">Post</button>
<div id="posts"></div>
<button onclick="logout()">Logout</button>
</div>
<script>
const firebaseConfig = {
apiKey: "AlzaSyBl260NWzrUAriLA3HTSmlGfqKdjy2wVzl",
authDomain: "login-website-38254.firebaseapp.com",
projectId: "login-website-38254",
messagingSenderId: "149474533276",
appId: "1:149474533276:web:03605462f9f819b33c3259"
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();
// AUTH
function signUp() {
auth.createUserWithEmailAndPassword(email.value, password.value)
.then(userCredential => {
const user = userCredential.user;
db.collection("users").doc(user.uid).set({
email: user.email,
createdAt: new Date()
});
alert("Account Created!");
})
.catch(err => alert(err.message));
}
function signIn() {
auth.signInWithEmailAndPassword(email.value, password.value)
.catch(err => alert(err.message));
}
function logout() {
auth.signOut();
}
// USERNAME
function saveUsername() {
const user = auth.currentUser;
const name = document.getElementById("username").value;
db.collection("users").doc(user.uid).update({
username: name
});
alert("Username saved!");
}
// CREATE POST
function createPost() {
const user = auth.currentUser;
const text = document.getElementById("postInput").value;
if (!text) return;
db.collection("posts").add({
uid: user.uid,
text: text,
likes: 0,
createdAt: new Date()
});
document.getElementById("postInput").value = "";
}
// LIKE
function likePost(id) {
db.collection("posts").doc(id).update({
likes: firebase.firestore.FieldValue.increment(1)
});
}
// LOAD POSTS
function loadPosts() {
db.collection("posts")
.orderBy("createdAt", "desc")
.onSnapshot(snapshot => {
const postsDiv = document.getElementById("posts");
postsDiv.innerHTML = "";
snapshot.forEach(doc => {
const post = doc.data();
postsDiv.innerHTML += `
<div class="post">
<p>${post.text}</p>
<p>❤️ ${post.likes || 0}</p>
<button onclick="likePost('${doc.id}')">Like</button>
</div>
`;
});
});
}
// AUTH STATE
auth.onAuthStateChanged(user => {
if (user) {
document.getElementById("login").style.display = "none";
document.getElementById("dashboard").style.display = "block";
document.getElementById("userEmail").innerText = user.email;
loadPosts();
} else {
document.getElementById("login").style.display = "block";
document.getElementById("dashboard").style.display = "none";
}
});
</script>
</body>
</html>