From 71c014cbe8533b6c08981168c01065ad78fe9235 Mon Sep 17 00:00:00 2001
From: vimal-java-dev <vimal929@gmail.com>
Date: Mon, 13 Oct 2025 03:52:41 +0530
Subject: [PATCH] Created visitor counter

Made card & put color

Signed-off-by: vimal-java-dev <vimal929@gmail.com>
---
 css/main.css         | 79 ++++++++++++++++++++++++++++++++++++++++++++
 index.html           | 13 ++++++++
 js/visitorCounter.js | 44 ++++++++++++++++++++++++
 3 files changed, 136 insertions(+)
 create mode 100644 js/visitorCounter.js

diff --git a/css/main.css b/css/main.css
index 3402554..63c8896 100644
--- a/css/main.css
+++ b/css/main.css
@@ -212,4 +212,83 @@ body.dark #darkModeToggle {
 
 body.dark #darkModeToggle:hover {
   background: #3ce8ff;
+}
+
+/* Wrapper for centering counter horizontally */
+.counter-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 40px;
+}
+
+/* Elegant visitor counter */
+.visitor-count {
+  display: inline-block;
+  background: linear-gradient(135deg,
+      rgba(255, 255, 255, 0.25),
+      rgba(255, 255, 255, 0.35));
+  /* frosted glass + subtle gradient */
+  color: #333;
+  font-size: 1.2rem;
+  font-weight: 500;
+  padding: 12px 24px;
+  /* slightly larger for elegance */
+  border-radius: 30px;
+  text-align: center;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 87, 34, 0.1);
+  /* glow */
+  backdrop-filter: blur(12px);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  margin: 0 auto;
+}
+
+/* Hover effect for interactivity */
+.visitor-count:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), 0 0 30px rgba(255, 87, 34, 0.2);
+  /* stronger glow on hover */
+}
+
+/* Animate the number pop */
+#visitorCount {
+  display: inline-block;
+  font-weight: bold;
+  transition: transform 0.2s ease, color 0.3s ease;
+}
+
+@keyframes popNumber {
+  0% {
+    transform: scale(1);
+    color: #333;
+  }
+
+  50% {
+    transform: scale(1.3);
+    color: #ff5722;
+  }
+
+  /* accent color during pop */
+  100% {
+    transform: scale(1);
+    color: #333;
+  }
+}
+
+#visitorCount.animate-pop {
+  animation: popNumber 0.4s ease;
+}
+
+.visitor-count-card {
+  background: rgba(179, 105, 105, 0.3);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 20px;
+  margin: 20px 0;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+body.dark .visitor-count-card {
+  background-color: #467db4;
+  color: #000;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 46bcb5d..3785120 100644
--- a/index.html
+++ b/index.html
@@ -218,6 +218,18 @@ <h3>Desktop Chat Application (Local Area Network)</h3>
     </div>
   </section><br />
 
+  <!-- Visitor Counter Section -->
+  <section class="container fade-in counter-container">
+    <div class="visitor-count-card">
+      <div class="visitor-count">
+        <h2 style="color: #222">Visitor Counter</h2>
+        <h3 style="color: #604848">
+          👋 Total Visitors: <span id="visitorCount">Loading...</span>
+        </h3>
+      </div>
+    </div>
+  </section><br />
+
   <!-- Contact Section -->
   <section id="contact" class="container fade-in">
     <h2>Contact Me</h2>
@@ -252,6 +264,7 @@ <h2>Contact Me</h2>
 
   <!-- JS -->
   <script src="/js/common.js"></script>
+  <script type="module" src="/js/visitorCounter.js"></script>
   <script src="/js/main.js"></script>
 </body>
 
diff --git a/js/visitorCounter.js b/js/visitorCounter.js
new file mode 100644
index 0000000..959ef60
--- /dev/null
+++ b/js/visitorCounter.js
@@ -0,0 +1,44 @@
+// Import the functions you need from the SDKs you need
+// Import Firebase SDK modules
+import { initializeApp } from "https://www.gstatic.com/firebasejs/12.4.0/firebase-app.js";
+import { getFirestore, doc, getDoc, updateDoc, increment } from "https://www.gstatic.com/firebasejs/12.4.0/firebase-firestore.js";
+
+// 🔧 Your Firebase config (replace these values with your actual project config)
+const firebaseConfig = {
+    apiKey: "AIzaSyD3hwEQ4nOJxzxFWDPC1LrAIogpJ61wuuY",
+    authDomain: "portfolio-visitors-4515d.firebaseapp.com",
+    projectId: "portfolio-visitors-4515d",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+
+// Reference to your Firestore document
+const counterRef = doc(db, "visitors", "mainPage");
+
+// 🔢 Function to safely increment visitor count
+export async function updateVisitorCount() {
+    try {
+        // Increment the counter in Firestore
+        await updateDoc(counterRef, { count: increment(1) });
+        const snap = await getDoc(counterRef);
+
+        if (snap.exists()) {
+            const countEl = document.getElementById("visitorCount");
+            countEl.textContent = snap.data().count;
+
+            // ✨ Animate the number pop
+            countEl.classList.add("animate-pop");
+            setTimeout(() => countEl.classList.remove("animate-pop"), 400); // remove class after animation
+        } else {
+            document.getElementById("visitorCount").textContent = "0";
+        }
+    } catch (e) {
+        console.error("Error updating visitor count:", e);
+        document.getElementById("visitorCount").textContent = "Error";
+    }
+}
+
+// Run immediately when the script loads
+updateVisitorCount();