add visit stat

SMIL-SPCRAS · Sep 18, 2023 · 7771311 · 7771311
1 parent 56dec85
commit 7771311
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -20,7 +20,6 @@
     <link rel="icon" type="image/png" href="https://hci.nw.ru/img/favicon/favicon-96x96.png" sizes="96x96">
     <link rel="icon" type="image/png" href="https://hci.nw.ru/img/favicon/favicon-196x196.png" sizes="196x196">
     <link rel="icon" type="image/png" href="https://hci.nw.ru/img/favicon/favicon-228x228.png" sizes="228x228">
-
     <link rel="shortcut icon" href="https://hci.nw.ru/img/favicon/favicon.ico" type="image/x-icon">
 
     <link rel="apple-touch-icon" href="https://hci.nw.ru/img/favicon/apple-touch-icon-57x57.png" sizes="52x57">
@@ -32,7 +31,7 @@
     <link rel="apple-touch-icon" href="https://hci.nw.ru/img/favicon/apple-touch-icon-144x144.png" sizes="144x144">
     <link rel="apple-touch-icon" href="https://hci.nw.ru/img/favicon/apple-touch-icon-152x152.png" sizes="152x152">
     <link rel="apple-touch-icon" href="https://hci.nw.ru/img/favicon/apple-touch-icon-180x180.png" sizes="180x180">
-
+    <link href="https://fonts.googleapis.com/css?family=Merriweather:400,900,900i" rel="stylesheet">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script defer src="./static/js/fontawesome.all.min.js"></script>
     <script src="./static/js/bulma-carousel.min.js"></script>
@@ -41,6 +40,12 @@
     <script src="./static/js/index.js"></script>
 </head>
 <body>
+    <a id="btt-button">
+        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
+            <polygon points="12 6.586 3.293 15.293 4.707 16.707 12 9.414 19.293 16.707 20.707 15.293 12 6.586"/>
+        </svg>
+</a>
+
     <section class="hero">
     <div class="hero-body">
         <div class="container is-max-desktop">
@@ -331,7 +336,6 @@ <h2 class="title is-3">Evaluation Results</h2>
         </div>
 
     </section>
-
     <section class="hero teaser">
         <div class="container is-max-desktop">
         <div class="hero-body">
@@ -361,5 +365,6 @@ <h2 class="title is-3">Evaluation Results</h2>
         </div>
     </footer>
 
+    <script type="text/javascript" src="//rf.revolvermaps.com/0/0/8.js?i=5kew8sbyv6o&amp;m=7&amp;c=e63100&amp;cr1=ffffff&amp;f=arial&amp;l=0&amp;bv=90&amp;lx=-420&amp;ly=420&amp;hi=20&amp;he=7&amp;hc=a8ddff&amp;rs=80" async="async"></script>
 </body>
 </html>
diff --git a/static/css/index.css b/static/css/index.css
@@ -3,8 +3,13 @@ body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  --tw-bg-opacity: 1;
+  background-color: rgba(23,23,23,var(--tw-bg-opacity));
 }
 
+section {
+  background-color: #fafafa;
+}
 
 .database {
   margin-top: 80px;
@@ -14,7 +19,6 @@ body {
   text-align: center;
 }
 
-
 @media screen and (min-width: 700px) {
   .sliders {
       display: flex;
@@ -35,6 +39,43 @@ body {
     border-collapse: collapse;
     width: 80%;
   }
+
+  #btt-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border: 3px solid #363636;
+    background-color: #fafafa;
+    border-radius: .3rem;
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    transition: background-color .3s,
+    opacity .5s, visibility .5s;
+    opacity: 0;
+    visibility: visible;
+    z-index: 1000;
+  }
+
+  #btt-button::after {
+    color: #fff;
+  }
+  #btt-button:hover {
+    cursor: pointer;
+    background-color: #209cee;
+    border: none;
+  }
+
+  #btt-button:active {
+    background-color: #0f4e79;
+  }
+
+  #btt-button.show {
+    opacity: 1;
+    visibility: visible;
+  }
 }
 
 @media screen and (max-width: 700px) {

diff --git a/static/img/arrow.svg b/static/img/arrow.svg
diff --git a/static/js/comp-slider.js b/static/js/comp-slider.js
@@ -1,6 +1,7 @@
 const slider_first = document.querySelector('.slider-first');
 const slider_second = document.querySelector('.slider-second');
 const slider_third = document.querySelector('.slider-third');
+const btn = document.querySelector('#btt-button');
 
 document.querySelector('.slider-input-first').addEventListener('input', (e) => {
     slider_first.style.setProperty('--position', `${e.target.value}%`);
@@ -12,3 +13,17 @@ document.querySelector('.slider-input-second').addEventListener('input', (e) =>
 document.querySelector('.slider-input-third').addEventListener('input', (e) => {
     slider_third.style.setProperty('--position', `${e.target.value}%`);
 });
+
+
+window.addEventListener('scroll', function () {
+    if (window.scrollY > 100) {
+        btn.classList.add('show');
+    } else {
+        btn.classList.remove('show');
+    }
+});
+
+btn.addEventListener('click', function (e) {
+    e.preventDefault();
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+});
diff --git a/static/js/index.js b/static/js/index.js
@@ -3,6 +3,7 @@ window.HELP_IMPROVE_VIDEOJS = false;
 var INTERP_BASE = "./static/interpolation/stacked";
 var NUM_INTERP_FRAMES = 240;
 
+
 var interp_images = [];
 function preloadInterpolationImages() {
   for (var i = 0; i < NUM_INTERP_FRAMES; i++) {