Merge pull request #2614 from Anjaliavv51/main

Visitors counts increaments move it to the left end corner of webpage

assets/css/style.css

@@ -6,7 +6,9 @@ body {
  color: var(--sonic-silver);
  user-select: none;
 }
-
+.visitor-counter{
+ font-family: var(--ff-philosopher);
+}
 .container {
  padding: 0px;
 }

assets/css/visitors.css

@@ -0,0 +1,52 @@
+.visitor-counter {
+ position: fixed;
+ top: 570px;
+ left: 10px;
+ background-color: transparent;
+ height: 100px;
+ width: 100px;
+ color: black;
+ font-weight: 700;
+ font-size: 18px;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ border-radius: 200px;
+ backdrop-filter: blur(5px);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
+ 0 1px 3px rgba(0, 0, 0, 0.08);
+ z-index: 1000;
+ }
+
+ .visitor-counter div:first-child {
+ margin-bottom: 5px;
+ }
+
+ .website-counter {
+ font-size: 24px;
+ }
+
+ @media screen and (max-width: 768px) {
+ .visitor-counter {
+ height: 100px;
+ width: 100px;
+ font-size: 16px;
+ }
+
+ .website-counter {
+ font-size: 20px;
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ .visitor-counter {
+ height: 80px;
+ width: 80px;
+ font-size: 14px;
+ }
+
+ .website-counter {
+ font-size: 18px;
+ }
+ }

assets/js/visitors.js

@@ -0,0 +1,21 @@
+ // Function to get the count from localStorage or initialize it
+ function getVisitorCount() {
+ return localStorage.getItem('visitorCount') || 0;
+ }
+
+ // Function to increment and save the count
+ function incrementVisitorCount() {
+ let count = parseInt(getVisitorCount()) + 1;
+ localStorage.setItem('visitorCount', count);
+ return count;
+ }
+
+ // Function to display the count
+ function displayVisitorCount() {
+ const counterElement = document.querySelector('.website-counter');
+ const count = incrementVisitorCount();
+ counterElement.textContent = count;
+ }
+
+ // Call the display function when the page loads
+ document.addEventListener('DOMContentLoaded', displayVisitorCount);

index.html

@@ -2587,52 +2587,16 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
 
  </script>
  <br /><br />
- <div style="
- background-color: rgba(255, 178, 168, 0.041); /* Semi-transparent background */
- height: 30rem;
- width: 30rem; /* Make width and height equal for a circular shape */
- color: rgb(99, 23, 23);
- font-weight: 700;
- font-size: 45px;
- text-align: center;
- line-height: 150px; /* Center text vertically */
- border-radius: 30rem; /* Make the div circular */
- backdrop-filter: blur(5rem); /* Glassmorphism effect */
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), /* Slight shadow for depth */
- 0 1px 3px rgba(0, 0, 0, 0.08); /* Additional subtle shadow */
- align-items: center;
- margin-left: 45%;
- border-width: 4px;
-
- ">
- <div>Visitor</div>
- <div class="website-counter" >
-
- <script>
-var counterContainer = document.querySelector(".website-counter");
-var resetButton = document.querySelector("#reset");
-var visitCount = localStorage.getItem("page_view");
-
-// Check if page_view entry is present
-if (visitCount) {
- visitCount = Number(visitCount) + 1;
- localStorage.setItem("page_view", visitCount);
-} else {
- visitCount = 1;
- localStorage.setItem("page_view", 1);
-}
-counterContainer.innerHTML = visitCount;
-
-// Adding onClick event listener
-resetButton.addEventListener("click", () => {
- visitCount = 1;
- localStorage.setItem("page_view", 1);
- counterContainer.innerHTML = visitCount;
-});
- </script></div>
-</div>
+ <link rel="stylesheet" href="./assets/css/visitors.css">
+ <!-- ############### Footer ############### -->
+ <div class="visitor-counter">
+ <div>Visitor</div>
+ <div class="website-counter"></div>
+ </div>
+ <script src="path/to/visitorCounter.js"></script>
+ <script src="./assets/css/visitors.css"></script>
 
- <script src="./assets/js/rate.js"></script>
+ <script src="./assets/js/visitors.js"></script>