- 
+ 
${post.username}
${optionsHTML}
@@ -403,11 +484,11 @@ document.addEventListener('DOMContentLoaded', () => {
`;
if (prepend) {
- if (!feedContainer.querySelector(`[data-post-id="${post.id}"]`)) {
- feedContainer.insertBefore(article, feedContainer.firstChild);
+ if (!container.querySelector(`[data-post-id="${post.id}"]`)) {
+ container.insertBefore(article, container.firstChild);
}
}
- else feedContainer.appendChild(article);
+ else container.appendChild(article);
// Attach Drag-to-Scroll & Lightbox Click
const carousel = article.querySelector('.media-carousel');
@@ -487,15 +568,26 @@ document.addEventListener('DOMContentLoaded', () => {
const card = deleteBtn.closest('.post-card');
const id = card.getAttribute('data-post-id');
if (id && id.startsWith('post_')) {
+ const userPosts = JSON.parse(localStorage.getItem('socialAppUserPosts') || '[]');
+ const postToDelete = userPosts.find(p => p.id === id);
+ const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
+
+ if (!postToDelete || postToDelete.userEmail !== currentUser.email) {
+ alert('You can only delete your own posts.');
+ return;
+ }
+
if (confirm('Delete this post?')) {
card.style.transition = 'opacity 0.3s, transform 0.3s';
card.style.opacity = '0';
card.style.transform = 'scale(0.9)';
setTimeout(() => card.remove(), 300);
- let userPosts = JSON.parse(localStorage.getItem('socialAppUserPosts') || '[]');
- userPosts = userPosts.filter(p => p.id !== id);
- localStorage.setItem('socialAppUserPosts', JSON.stringify(userPosts));
+
+ const updatedPosts = userPosts.filter(p => p.id !== id);
+ localStorage.setItem('socialAppUserPosts', JSON.stringify(updatedPosts));
+
deleteImageFromDB(id);
+
const deletedPosts = JSON.parse(localStorage.getItem('socialAppDeletedPosts') || '[]');
if (!deletedPosts.includes(id)) {
deletedPosts.push(id);
@@ -687,12 +779,15 @@ document.addEventListener('DOMContentLoaded', () => {
const caption = captionInput.value.trim();
const id = 'post_' + Date.now();
+ const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
const displayPost = {
id,
media: stagedMedia,
caption,
timestamp: new Date().toISOString(),
- username: 'you',
+ username: currentUser.username || 'You',
+ userAvatar: currentUser.avatar,
+ userEmail: currentUser.email, // Secure Owner ID
likes: 0
};
renderPost(displayPost, true);
@@ -703,6 +798,7 @@ document.addEventListener('DOMContentLoaded', () => {
caption,
timestamp: displayPost.timestamp,
username: displayPost.username,
+ userEmail: currentUser.email, // Secure Owner ID
likes: 0
};
diff --git a/styles/main.css b/styles/main.css
index c7e0ab7..1114df2 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -952,3 +952,73 @@ p {
display: none !important;
}
+
+/* --- ONBOARDING STYLES --- */
+.profile-upload-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.avatar-upload-wrapper {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ position: relative;
+ cursor: pointer;
+ border: 2px dashed var(--glass-border);
+ padding: 2px;
+ transition: transform 0.2s;
+}
+
+.avatar-upload-wrapper:active {
+ transform: scale(0.95);
+}
+
+.avatar-upload-wrapper img {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.upload-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0,0,0,0.4);
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 0;
+ transition: opacity 0.2s;
+}
+
+.avatar-upload-wrapper:hover .upload-overlay {
+ opacity: 1;
+}
+
+
+/* Fix Visibility for Onboarding Views */
+#verification-view.hidden,
+#onboarding-view.hidden {
+ display: none !important;
+}
+
+
+/* FINAL FIX: Ensure ALL login containers hide correctly */
+.login-container.hidden,
+#login-view.hidden {
+ display: none !important;
+}
+
+
+/* Fix Bottom Nav Z-Index and Visibility */
+.bottom-nav {
+ z-index: 100;
+}
+