added rating stars

lbuchli · Oct 16, 2021 · 3f2ca06 · 3f2ca06
1 parent 6b6ec7e
commit 3f2ca06
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 1 deletion.
diff --git a/site_viewer/static/css/style.css b/site_viewer/static/css/style.css
@@ -0,0 +1,35 @@
+.rating {
+    position: relative;
+    width: 180px;
+    background: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: .3em;
+    padding: 5px;
+    overflow: hidden;
+    border-radius: 20px;
+    box-shadow: 0 0 2px #b3acac;
+}
+
+.rating__result {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateY(-10px) translateX(-5px);
+    z-index: -9;
+    font: 3em Arial, Helvetica, sans-serif;
+    color: #ebebeb8e;
+    pointer-events: none;
+}
+
+.rating__star {
+    font-size: 1.3em;
+    cursor: pointer;
+    color: #dabd18b2;
+    transition: filter linear .3s;
+}
+
+.rating__star:hover {
+    filter: drop-shadow(1px 1px 4px gold);
+}
diff --git a/site_viewer/static/js/interactiveStars.js b/site_viewer/static/js/interactiveStars.js
@@ -0,0 +1,20 @@
+const ratingStars = [...document.getElementsByClassName("rating__star")];
+
+function executeRating(stars) {
+    const starClassActive = "rating__star fas fa-star";
+    const starClassInactive = "rating__star far fa-star";
+    const starsLength = stars.length;
+    let i;
+    stars.map((star) => {
+        star.onclick = () => {
+            i = stars.indexOf(star);
+
+            if (star.className===starClassInactive) {
+                for (i; i >= 0; --i) stars[i].className = starClassActive;
+            } else {
+                for (i; i < starsLength; ++i) stars[i].className = starClassInactive;
+            }
+        };
+    });
+}
+executeRating(ratingStars);
diff --git a/site_viewer/static/webxr.html b/site_viewer/static/webxr.html
@@ -1,13 +1,26 @@
 <!doctype html>
 <html>
 <head>
+  <link href="css/style.css" rel="stylesheet" type="text/css">
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <title>Hello WebXR!</title>
+  <title>Site Previewer</title>
 </head>
 <body>
+
 <script src="/js/xr.js" type="module"></script>
 <button onclick="activateXR()">Start Hello WebXR</button>
+
+<script src="/js/interactiveStars.js" type="module"></script>
+<script src="https://kit.fontawesome.com/e5e42300a8.js" crossorigin="anonymous"></script>
+<div class="rating">
+  <i class="rating__star far fa-star"></i>
+  <i class="rating__star far fa-star"></i>
+  <i class="rating__star far fa-star"></i>
+  <i class="rating__star far fa-star"></i>
+  <i class="rating__star far fa-star"></i>
+</div>
+
 </body>
 </html>