feat: added visitos count

about-us.html

@@ -21,6 +21,7 @@
       rel="stylesheet"
       href="https://unicons.iconscout.com/release/v4.0.8/css/line.css"
     />
+    <script src="logger.js"></script>
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=G-GTFGBS8HG8"
@@ -76,6 +77,10 @@
       </header>
   </div>
 
+  <div class="logger">
+    <!-- <h2>Logger</h2> -->
+    <div id="logger" class="">Visitors: 0</div>
+</div>
 
 
 

contact-us.html

@@ -12,6 +12,7 @@
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css">
+    <script src="logger.js"></script>
 
 
 </head>
@@ -49,6 +50,11 @@
         </nav>
     </header>
 
+
+    <div class="logger">
+        <!-- <h2>Logger</h2> -->
+        <div id="logger" class="">Visitors: 0</div>
+    </div>
     <!-- Main Contact Form Section -->
     <div class="contact-section container">
         <div class="contact-container container">

index.html

@@ -11,6 +11,7 @@
         integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
+
     <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-GTFGBS8HG8"></script>
     <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
@@ -64,6 +65,11 @@
         </header>
     </div>
 
+    <div class="logger">
+        <!-- <h2>Logger</h2> -->
+        <div id="logger" class="">Visitors: 0</div>
+    </div>
+
 
 
 
@@ -1573,6 +1579,8 @@ <h3 class="name">Aayush Talreja</h3>
         });
     </script>
 
+    <script src="logger.js"></script>
+
 </body>
 
 </html>

logger.css

@@ -0,0 +1,20 @@
+/* body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+  } */
+
+  .logger {
+    background: linear-gradient(to right, #3b82f6, #9333ea);
+    background-color: red;
+    color: white;
+    font-size: 14px;
+    padding: 10px 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+

logger.js

@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", function () {
+    async function initLogger() {
+      const body = {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          clientSecret: "f274a57c-fe8f-4967-9cd7-9b109d339fea",
+          applicationId: "16cea802-947d-48ff-8761-3fda8350083b",
+        }),
+      };
+
+      try {
+        const res = await fetch("https://logger-mocha-six.vercel.app/api/logger/v1", body);
+        const json = await res.json();
+
+        if (res.status === 200) {
+          document.getElementById("logger").textContent = `Visitors: ${json}`;
+        } else {
+          console.error("Error fetching visitors:", json);
+        }
+      } catch (error) {
+        console.error("Error connecting to the API:", error);
+      }
+    }
+
+    initLogger();
+  });
+

project.html

@@ -10,6 +10,7 @@
       type="image/x-icon"
     />
     <link rel="stylesheet" href="style.css" />
+
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
@@ -21,6 +22,7 @@
       rel="stylesheet"
       href="https://unicons.iconscout.com/release/v4.0.8/css/line.css"
     />
+    <script src="logger.js"></script>
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=G-GTFGBS8HG8"
@@ -78,6 +80,11 @@
       </header>
     </div>
 
+    <div class="logger">
+      <!-- <h2>Logger</h2> -->
+      <div id="logger" class="">Visitors: 0</div>
+  </div>
+
     <div class="line"><br /></div>
 
     <div class="search">

style.css

@@ -48,6 +48,18 @@ body {
   overflow-x: hidden;
 }
 
+.logger {
+  background: linear-gradient(to right, #3b82f6, #9333ea);
+  background-color: red;
+  color: white;
+  font-size: 14px;
+  padding: 10px 20px;
+  border-radius: 8px;
+  width: fit-content;
+  margin: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
 /* Progress bar */
 
 .progress-bar {