blur animate visitor data #4

abrahamjuliot · Oct 17, 2020 · d9624ff · d9624ff
1 parent 003b8a6
commit d9624ff
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 24 deletions.
diff --git a/creep.js b/creep.js
@@ -295,7 +295,7 @@ const imports = {
 					<strong>${browser != 'unknown' ? browser : 'Browser'}</strong>
 					<div class="flex-grid">
 						<div class="col-six">
-							<div>trust score: ${
+							<div>trust score: <span class="unblurred">${
 								score > 95 ? `${score}% <span class="grade-A">A+</span>` :
 								score == 95 ? `${score}% <span class="grade-A">A</span>` :
 								score >= 90 ? `${score}% <span class="grade-A">A-</span>` :
@@ -311,30 +311,30 @@ const imports = {
 								score > 55 ? `${score}% <span class="grade-F">F+</span>` :
 								score == 55 ? `${score}% <span class="grade-F">F</span>` :
 								`${score < 0 ? 0 : score}% <span class="grade-F">F-</span>`
-							}</div>
-							<div>visits: ${visits}</div>
-							<div class="ellipsis">first: ${toLocaleStr(firstVisit)}</div>
-							<div class="ellipsis">last: ${toLocaleStr(latestVisit)}</div>
-							<div>persistence: ${hours} hours</div>
+							}</span></div>
+							<div>visits: <span class="unblurred">${visits}</span></div>
+							<div class="ellipsis">first: <span class="unblurred">${toLocaleStr(firstVisit)}</span></div>
+							<div class="ellipsis">last: <span class="unblurred">${toLocaleStr(latestVisit)}</span></div>
+							<div>persistence: <span class="unblurred">${hours} hours</span></div>
 						</div>
 						<div class="col-six">
-							<div>has trash: ${
+							<div>has trash: <span class="unblurred">${
 								(''+hasTrash) == 'true' ?
 								`true (${hashMini(fp.trash.$hash)})` : 
 								'false'
-							}</div>
-							<div>has lied: ${
+							}</span></div>
+							<div>has lied: <span class="unblurred">${
 								(''+hasLied) == 'true' ? 
 								`true (${hashMini(fp.lies.$hash)})` : 
 								'false'
-							}</div>
-							<div>has errors: ${
+							}</span></div>
+							<div>has errors: <span class="unblurred">${
 								(''+hasErrors) == 'true' ? 
 								`true (${hashMini(fp.capturedErrors.$hash)})` : 
 								'false'
-							}</div>
-							<div class="ellipsis">loose fingerprints: ${subIdsLen} (last: ${hashMini(fpHash)})</div>
-							<div>bot: ${subIdsLen > 10 && hours < 48 ? 'true [10 loose fingerprints within 48 hours]' : 'false'}</div>
+							}</span></div>
+							<div class="ellipsis">loose fingerprints: <span class="unblurred">${subIdsLen} (last: ${hashMini(fpHash)})</span></div>
+							<div>bot: <span class="unblurred">${subIdsLen > 10 && hours < 48 ? 'true (10 loose in 48 hours)' : 'false'}</span></div>
 						</div>
 					</div>
 				</div>

diff --git a/index.html b/index.html
@@ -19,18 +19,18 @@
 					<strong id="loader">Loading...</strong>
 					<div class="flex-grid">
 						<div class="col-six">
-							<div>trust score:</div>
-							<div>visits:</div>
-							<div>first:</div>
-							<div>last:</div>
-							<div>persistence:</div>
+							<div>trust score: <span class="blurred">100%</span></div>
+							<div>visits: <span class="blurred">1</span></div>
+							<div>first: <span class="blurred">ABC ABC ## ####, 00:00:00 AM</span></div>
+							<div>last: <span class="blurred">ABC ABC ## ####, 00:00:00 AM</span></div>
+							<div>persistence: <span class="blurred">0.0 hours/span></div>
 						</div>
 						<div class="col-six">
-							<div>has trash:</div>
-							<div>has lied:</div>
-							<div>has errors:</div>
-							<div>loose fingerprints:</div>
-							<div>bot:</div>
+							<div>has trash: <span class="blurred">false</span></div>
+							<div>has lied: <span class="blurred">false</span></div>
+							<div>has errors: <span class="blurred">false</span></div>
+							<div>loose fingerprints: <span class="blurred">1 (last: 00000000)</span></div>
+							<div>bot: <span class="blurred">false</span></div>
 						</div>
 					</div>
 				</div>

diff --git a/style.css b/style.css
@@ -393,6 +393,34 @@ input[type="radio"] {
     box-shadow: 0px 1px 1px 0px #cfd0d1;
 }
 
+.blurred {
+	filter: blur(2.5px);
+	animation: reveal 5s ease both;
+}
+
+.unblurred {
+	animation: unblur .3s ease both;
+}
+
+@keyframes reveal {
+  0% {
+	opacity: 0.1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+@keyframes unblur {
+  0% {
+	opacity: 0.5;
+	filter: blur(2.5px);
+  }
+  100% {
+	opacity: 1;
+	filter: blur(0);
+  }
+}
+
 .flex-grid {
 	display: flex;
 	flex-direction: column;