From b8d6752ecada579a406a5c5e12def8b764d4ba15 Mon Sep 17 00:00:00 2001 From: Subhajit-2023-44 Date: Thu, 24 Oct 2024 22:57:23 +0530 Subject: [PATCH] done --- index.html | 13 +++++++ visi.css | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++ visi.js | 29 +++++++++++++++ 3 files changed, 144 insertions(+) create mode 100644 visi.css create mode 100644 visi.js diff --git a/index.html b/index.html index e64fb04..fdf3254 100644 --- a/index.html +++ b/index.html @@ -926,6 +926,19 @@

FIND US

+ +

+ + +
+
Visitor
+
+
+ + + + + diff --git a/visi.css b/visi.css new file mode 100644 index 0000000..f28e84a --- /dev/null +++ b/visi.css @@ -0,0 +1,102 @@ +.visitor-counter { + + position: fixed; + top: 570px; + left: -10px; + background-color: rgb(31 184 153); + height: 60px; + width: 85px; + color: #ffffff;/* Darker text for better contrast */ + font-weight: 700; + font-size: 18px; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 12px; /* Softer corners */ + backdrop-filter: blur(10px); /* Increased blur for a modern touch */ + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), /* Slightly more pronounced shadow */ + 0 2px 4px rgba(0, 0, 0, 0.1); + z-index: 1000; + transition: all 0.3s ease; /* Smooth transition for hover effect */ + + } + + .visitor-counter:hover { + + transform: scale(1.05); /* Slightly enlarge on hover */ + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */ + + } + + .visitor-counter div:first-child { + + margin-bottom: -5px; + font-size: 14px; /* Adjusted for clarity */ + letter-spacing: 1px; /* Increased spacing for readability */ + + } + + .website-counter { + + font-size: 24px; + font-family: 'Arial', sans-serif; /* Consistent font family */ + + } + + @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; + + } + + } + + .dark-mode .visitor-counter div { + + color: #f0f0f0; /* Lighter text for dark mode */ + + } + + .dark-mode .visitor-counter .website-counter { + + color: #f0f0f0; /* Lighter color for consistency */ + + } + + .dark-mode .visitor-counter { + + background-color: rgba(0, 0, 0, 0.7); /* Darker background for dark mode */ + box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1), + 0 2px 4px rgba(255, 255, 255, 0.05); + + } \ No newline at end of file diff --git a/visi.js b/visi.js new file mode 100644 index 0000000..64aaa8d --- /dev/null +++ b/visi.js @@ -0,0 +1,29 @@ +// 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);