diff --git a/public/leader11.jpg b/public/leader11.jpg new file mode 100644 index 0000000..c23da7d Binary files /dev/null and b/public/leader11.jpg differ diff --git a/public/leaderimage.svg b/public/leaderimage.svg new file mode 100644 index 0000000..655765e --- /dev/null +++ b/public/leaderimage.svg @@ -0,0 +1,161 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/stage.svg b/public/stage.svg new file mode 100644 index 0000000..2b68ea2 --- /dev/null +++ b/public/stage.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/Components/Chat.module.css b/src/Components/Chat.module.css index ad35ca4..6fbfb1d 100644 --- a/src/Components/Chat.module.css +++ b/src/Components/Chat.module.css @@ -30,7 +30,7 @@ .window_div_outer { width: 100%; - background-image: url("https://i.pinimg.com/originals/a7/99/61/a79961637e3d670135579a9138176fcf.gif"); + /* background-image: url("https://i.pinimg.com/originals/a7/99/61/a79961637e3d670135579a9138176fcf.gif"); */ } .chat_window { @@ -110,7 +110,7 @@ } .no_chat_outer { - background-image: url("https://i.pinimg.com/originals/a7/99/61/a79961637e3d670135579a9138176fcf.gif"); + /* background-image: url("https://i.pinimg.com/originals/a7/99/61/a79961637e3d670135579a9138176fcf.gif"); */ } .no_chat_inner { diff --git a/src/Components/ChatWindow.module.css b/src/Components/ChatWindow.module.css index 39ed540..5096ca1 100644 --- a/src/Components/ChatWindow.module.css +++ b/src/Components/ChatWindow.module.css @@ -101,7 +101,7 @@ object-fit: cover; background-repeat: no-repeat; /* background: linear-gradient(270deg, #010720, #1b0639, #2f0644); */ - background-image: url("https://i.pinimg.com/originals/70/eb/0b/70eb0b53eb57c91db403928c5d02a19a.gif"); + /* background-image: url("https://i.pinimg.com/originals/70/eb/0b/70eb0b53eb57c91db403928c5d02a19a.gif"); */ } .chat_head_inner { @@ -112,7 +112,7 @@ .chat_outer { position: relative; display: flex; - background-image: url("https://i.pinimg.com/originals/a7/99/61/a79961637e3d670135579a9138176fcf.gif"); + /* background-image: url("https://i.pinimg.com/originals/a7/99/61/a79961637e3d670135579a9138176fcf.gif"); */ } .chat_inner { diff --git a/src/Components/Feed.js b/src/Components/Feed.js index 75e30df..8e3cd2c 100644 --- a/src/Components/Feed.js +++ b/src/Components/Feed.js @@ -20,73 +20,10 @@ const Feed = () => { const [quote, setQuote] = useState(""); const [topStreaks, setTopStreaks] = useState([]); const userId = localStorage.getItem("userId"); - const cardRef = useRef(null); - const card_top_ref = useRef(null); - - useEffect(() => { - const card = cardRef.current; - - const handleMouseMove = (e) => { - const { width, height, left, top } = card.getBoundingClientRect(); - const x = e.clientX - left; - const y = e.clientY - top; - - const rotateX = (y / height - 0.5) * 20; - const rotateY = (x / width - 0.5) * -20; - - card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; - }; - - const handleMouseLeave = () => { - card.style.transform = "perspective(1000px) rotateX(0) rotateY(0)"; - }; - - if (card) { - card.addEventListener("mousemove", handleMouseMove); - card.addEventListener("mouseleave", handleMouseLeave); - } - - return () => { - if (card) { - card.removeEventListener("mousemove", handleMouseMove); - card.removeEventListener("mouseleave", handleMouseLeave); - } - }; - }, []); - - useEffect(() => { - const card_top = card_top_ref.current; - const handleMouseMove = (e) => { - const { width, height, left, top } = card_top.getBoundingClientRect(); - const x = e.clientX - left; - const y = e.clientY - top; - - const rotateX = (y / height - 0.5) * 20; - const rotateY = (x / width - 0.5) * -20; - - card_top.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; - }; - - const handleMouseLeave = () => { - card_top.style.transform = "perspective(1000px) rotateX(0) rotateY(0)"; - }; - - if (card_top) { - card_top.addEventListener("mousemove", handleMouseMove); - card_top.addEventListener("mouseleave", handleMouseLeave); - } - - // return () => { - // if (card_top) { - // card_top.removeEventListener("mousemove", handleMouseMove); - // card_top.removeEventListener("mouseleave", handleMouseLeave); - // } - // }; - }, []); const fetchUsername = async (userId) => { try { - const userRef = ref(realDb, `users/${userId}`); + const userRef = ref(realDb, 'users/${userId}'); const snapshot = await get(userRef); if (snapshot.exists()) { const userData = snapshot.val(); @@ -143,8 +80,7 @@ const Feed = () => { })) .sort( (a, b) => - Object.keys(b.likes || {}).length - - Object.keys(a.likes || {}).length + Object.keys(b.likes || {}).length - Object.keys(a.likes || {}).length ) : []; setPosts(postsArray); @@ -154,103 +90,68 @@ const Feed = () => { }, [userId]); return ( -
- -
+
+ + {/* Main content */} +
{/* Quote Header */} -
-
-

- {quote} -

+
+
+

{quote}

{/* Main Content */} -
+
{userId && username ? (
{/* Left Column - Posts */} -
-
-

- -
+
+

+
{/* Right Column - Add Post & Streaks */}
{/* Add Post Section */} -
-
- -
+
+

Share Thoughts

+
{/* Top Streaks Section */} -
-
-

- Top Streaks{" "} - fire icon -

- -
- {topStreaks.map((user, index) => ( -
-
-
- {user.username.charAt(0).toUpperCase()} -
- - {user.username} - -
-
- - {user.streak} - - - - +
+

Top Streaks 🔥

+
+ {topStreaks.map((user, index) => ( +
+
+
+ {user.username.charAt(0).toUpperCase()}
+ {user.username} +
+
+ {user.streak} + 🔥
- ))} -
+
+ ))}
) : ( -
+

Loading your feed...

)}
+
-
); }; -export default Feed; +export default Feed; \ No newline at end of file diff --git a/src/Components/Feed.module.css b/src/Components/Feed.module.css index de28ac5..38fcbd2 100644 --- a/src/Components/Feed.module.css +++ b/src/Components/Feed.module.css @@ -1,4 +1,4 @@ -.flip_card { +/* .flip_card { width: 2rem; height: 2rem; background: linear-gradient( @@ -73,9 +73,9 @@ .top_li:hover { /* background: linear-gradient(#340274,#6600ff,#9aa2ff); */ - background-color: rgba(229, 202, 255, 0.1); + /* background-color: rgba(229, 202, 255, 0.1); } .feed_inner_load { height: 100vw; -} +} */ \ No newline at end of file diff --git a/src/Components/LeaderBoard.js b/src/Components/LeaderBoard.js index bab0b46..8b27dc6 100644 --- a/src/Components/LeaderBoard.js +++ b/src/Components/LeaderBoard.js @@ -98,14 +98,14 @@ const LeaderBoard = () => {
-

+

LeaderBoard

{/* Logged-in User's Rank */} {loggedInUserRank ? ( -
-

+
+

Your Rank: {loggedInUserRank.rank}

@@ -115,13 +115,13 @@ const LeaderBoard = () => { className="w-12 h-12 rounded-full object-cover" />
-

+

Username: {loggedInUserRank.username}

-

+

Tasks Completed: {loggedInUserRank.completedTasks}

-

+

Score: {loggedInUserRank.score}

diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js index 7b9c3e7..9dcdd3c 100644 --- a/src/Components/Navbar.js +++ b/src/Components/Navbar.js @@ -4,6 +4,7 @@ import styles from "./Navbar.module.css"; const Navbar = () => { return (
+