Added tooltip to Score column explaining scoring system

README.md

@@ -1 +1,116 @@
-# leetcode-ranking
+# CodePVG LeetCode Ranking
+
+A web-based platform developed for CodePVG to track and rank students based on their LeetCode performance.  
+It allows users to register with their LeetCode username and automatically fetches their problem-solving statistics to display on a leaderboard.
+
+---
+
+## Purpose
+
+The goal of this project is to:
+
+- Encourage consistent problem-solving among students  
+- Create a competitive yet motivating environment  
+- Provide visibility into individual coding progress  
+
+---
+
+## Features
+
+### User Registration
+- Users can register using their name and LeetCode username  
+- Accepts both direct usernames and profile links  
+- Validates whether the LeetCode user exists before registration  
+
+### Leaderboard System
+- Displays ranked users based on their LeetCode statistics  
+- Automatically updates rankings based on fetched data  
+- Provides a clean interface for easy comparison  
+
+### Automated Data Fetching
+- Periodically fetches user data using the LeetCode API  
+- Updates stored data without manual intervention  
+- Keeps leaderboard information up-to-date  
+
+### User Interface
+- Simple and clean UI design  
+- Smooth user experience with loading states  
+- Includes blur and spinner animation during registration  
+
+### Input Handling and Validation
+- Extracts username from full LeetCode profile links  
+- Prevents invalid or non-existent usernames  
+- Avoids duplicate or incorrect entries  
+
+### Error Handling
+- Handles API failures gracefully  
+- Displays alerts for invalid inputs  
+- Prevents multiple submissions during requests  
+
+---
+
+## Tech Stack
+
+| Layer     | Technology              |
+|----------|------------------------|
+| Frontend | HTML, CSS, JavaScript  |
+| Backend  | Node.js                |
+| API      | LeetCode API           |
+
+---
+
+## Project Structure
+
+```
+leetcode-ranking/
+│── frontend/        # UI (HTML, CSS, JS)
+│── data/            # Stored user data
+│── scripts/         # Automation scripts
+│── server.js        # Backend server
+│── package.json
+```
+
+---
+
+## How to Run Locally
+
+### 1. Clone the repository
+
+```bash
+git clone https://github.com/YOUR-USERNAME/leetcode-ranking.git
+cd leetcode-ranking
+```
+
+### 2. Install dependencies
+
+
+npm install
+cd frontend
+npm install
+
+### 3. Run the project
+
+
+npm run dev
+
+or
+
+node server.js
+
+## Usage
+
+1. Open the registration page  
+2. Enter your name and LeetCode username  
+3. Submit the form  
+4. View your ranking on the leaderboard  
+
+---
+
+## Contributing
+
+Contributions are welcome.
+
+- Fork the repository  
+- Create a new branch  
+- Make your changes  
+- Submit a Pull Request  

frontend/about.html

@@ -12,9 +12,9 @@
         <div class="container">
             <a href="/" class="logo">CodePVG Leaderboard</a>
             <ul class="nav-links">
-                <li><a href="/leaderboard">Leaderboard</a></li>
-                <li><a href="/registration">Registration</a></li>
-                <li><a href="/about">About</a></li>
+                <li><a href="leaderboard.html">Leaderboard</a></li>
+                <li><a href="registration.html">Registration</a></li>
+                <li><a href="about.html">About</a></li>
             </ul>
         </div>
     </nav>

frontend/leaderboard.html

@@ -38,19 +38,24 @@ <h1 class="page-title">Leaderboard</h1>
                     <div class="easy">Easy</div>
                     <div class="medium">Medium</div>
                     <div class="hard">Hard</div>
-                    <div>Score</div>
-                </div>
+                    <div class="score-header"> Score<span class="tooltip-icon">ℹ️
+                    <span class="tooltip-box">
+                    <strong>Scoring:</strong><br>
+                    Easy = 1 point<br>
+                    Medium = 3 points<br>
+                    Hard = 5 points<br><br>
+                    <a href="/about">Learn more</a>
+              </span>
+         </span>
+    </div>
+</div>
 
-                <div id="leaderboard-body">
-
-                </div>
+                <div id="leaderboard-body"></div>
             </div>
-
-            <div class="mobile-cards" id="mobile-cards">
-
-            </div>
-        </div>
-    </main>
+        <div class="mobile-cards" id="mobile-cards">
+    </div>
+</div>
+</main>
 
     <script>
         document.addEventListener('DOMContentLoaded', () => {

frontend/styles/main.css

@@ -808,4 +808,65 @@ html, body {
 html::-webkit-scrollbar, 
 body::-webkit-scrollbar {
   display: none;               /* Chrome, Safari, Opera */
+}
+
+.score-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.tooltip-icon {
+  position: relative;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.tooltip-box {
+  visibility: hidden;
+  opacity: 0;
+  width: 180px;
+  background-color: #222;
+  color: #fff;
+  text-align: left;
+  padding: 8px;
+  border-radius: 6px;
+
+  position: absolute;
+  top: 25px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+
+  transition: opacity 0.3s;
+  font-size: 12px;
+}
+
+.tooltip-icon:hover .tooltip-box {
+  visibility: visible;
+  opacity: 1;
+}
+
+.tooltip-box a {
+  color: #00bcd4;
+  text-decoration: none;
+}
+
+.tooltip-box a:hover {
+  text-decoration: underline;
+}
+
+.tooltip-box {
+  max-width: 220px;
+  white-space: normal;
+}
+
+.tooltip-icon {
+  position: relative;
+}
+
+/* Keep tooltip inside screen */
+.tooltip-icon:hover .tooltip-box {
+  left: 50%;
+  transform: translateX(-50%);
 }