add visitor counter - v1.0.0

gokdenizozkan · Jul 8, 2024 · 1ef1d13 · 1ef1d13
1 parent 05e7bef
commit 1ef1d13
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/css/rainbow-text.css b/css/rainbow-text.css
@@ -0,0 +1,31 @@
+/* retrieved from https://stackoverflow.com/questions/54702124/rainbow-text-animation-using-only-css */
+/* Asked and written by Azazel */
+/* Completed by Austen Holland */
+
+/*  removed #shadowbox styling */
+
+.rainbow {
+    text-align: center;
+    text-decoration: underline;
+    font-size: 16px; /* original value was 32, changed it */
+    font-family: monospace;
+    letter-spacing: 5px;
+}
+.rainbow_text_animated {
+    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: rainbow_animation 6s ease-in-out infinite;
+    background-size: 400% 100%;
+}
+
+@keyframes rainbow_animation {
+    0%,100% {
+        background-position: 0 0;
+    }
+
+    50% {
+        background-position: 100% 0;
+    }
+}
diff --git a/index.html b/index.html
@@ -6,6 +6,14 @@
     <title>kpm2csv by Gökdeniz Özkan</title>
     <link rel="icon" type="image/x-icon" href="img/kpm2csv-icon.png">
     <link rel="stylesheet" href="css/bulma.min.wdarkly.css" />
+    <link rel="stylesheet" href="css/rainbow-text.css" />
+    <!-- Visitor Stat -->
+    <script>
+        function updateVisitorCount(response) {
+            document.getElementById('visits').innerText = response.value;
+        }
+    </script>
+    <script async src="https://abacus.jasoncameron.dev/hit/app.gokdenizozkan.com/kpm2csv-visits?callback=updateVisitorCount"></script>
 </head>
 <body>
 <nav class="navbar" role="navigation" aria-label="main navigation">
@@ -21,7 +29,7 @@ <h1 class="title">Transfer Data From KPM to Others</h1>
             <p class="subtitle">Convert your plain text Kaspersky Password Manager export data into CSV files so that you can import them into other password managers such as 1Password.</p>
     </section>
 
-    <section id="upload-section" class="section">
+    <section id="upload-section" class="section is-medium">
         <div class="box is-flex is-flex-direction-column is-align-items-center">
             <label for="file-input">Upload your plain text KPM export:</label>
             <input id="file-input" type="file" />
@@ -94,7 +102,11 @@ <h2 class="title">FAQ</h2>
 
     <footer id="footer" class="footer">
         <div class="content has-text-centered">
-            <p>Created by <a href="https://linkedin.com/in/gokdenizozkan" target="_blank">Gökdeniz Özkan</a><br>The <a href="https://github.com/gokdenizozkan/kpm2csv" target="_blank">source code</a> is licensed <a href="https://opensource.org/license/mit">MIT</a>.</p>
+            <p>
+                <span class="rainbow rainbow_text_animated">Total visitor count is <span id="visits"></span>.</span><br>
+                Created by <a href="https://linkedin.com/in/gokdenizozkan" target="_blank">Gökdeniz Özkan</a><br>
+                The <a href="https://github.com/gokdenizozkan/kpm2csv" target="_blank">source code</a> is licensed <a href="https://opensource.org/license/mit">MIT</a>.
+            </p>
         </div>
     </footer>
 </main>