✨ randomized response info (#8)

* ✨ randomized response info

* 📦 compile jhtml

* 📦 compile html

ui/html/index.css

@@ -51,6 +51,7 @@ input, button {
 
 #search {
   text-align: center;
+  margin-bottom: 5rem;
 }
 #search #searchbar .buttonspacer {
   display: inline-block;
@@ -132,9 +133,22 @@ input, button {
   vertical-align: -0.3rem;
 }
 
+#results small.random {
+  color: #4c5666;
+  display: block;
+  margin-top: 1rem;
+  text-align: center;
+}
+#results small.random button {
+  background: none;
+  border: none;
+  color: #626e83;
+  cursor: pointer;
+  outline: none;
+  text-decoration: underline;
+}
 #results table {
   margin-left: 25vw;
-  margin-top: 5rem;
   width: 50vw;
 }
 #results table tr {

ui/html/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA1DO;EA2DP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAjFK;;AAkFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA9GO;EA+GP;;AAEF;EACC,OA/GQ;EAgHR;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAjIK;;AAkIN;EACC,OAlIK;;AAmIN;EACC,OAvIK;;AAwIP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA9IK;;AA+IN;EACC,OAnJK;;AAoJP;EACC;EACA;;AACA;EACC,kBAzJK;EA0JL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA3DO;EA4DP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAlFK;;AAmFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA/GO;EAgHP;;AAEF;EACC,OAhHQ;EAiHR;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OA9IK;;AA+IN;EACC,OA/IK;;AAgJN;EACC,OApJK;;AAqJP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA3JK;;AA4JN;EACC,OAhKK;;AAiKP;EACC;EACA;;AACA;EACC,kBAtKK;EAuKL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}

ui/html/index.js

@@ -55,8 +55,14 @@ function dnswatch_search() {
 					table += '</tr>\n'
 				});
 
+				table += '</table>';
+				// randomized response message
+				if (response['data']['randomized_response']) {
+					table += '<small class="random">This domain uses randomized responses. <button>Learn more</button></small>\n';
+				}
+
 				if (response['data']['found']) {   // only if reference confirms
-					table += '<tr></tr>\n';   // spacer
+					table += '<table><tr></tr>\n';   // spacer
 					//// search rows
 					response['data']['search'].forEach(i => {
 						table += '<tr>\n';

ui/jhtml-compat/index.css

@@ -52,6 +52,7 @@ input, button {
 
 #search {
   text-align: center;
+  margin-bottom: 5rem;
 }
 #search #searchbar .buttonspacer {
   display: inline-block;
@@ -133,9 +134,22 @@ input, button {
   vertical-align: -0.3rem;
 }
 
+#results small.random {
+  color: #4c5666;
+  display: block;
+  margin-top: 1rem;
+  text-align: center;
+}
+#results small.random button {
+  background: none;
+  border: none;
+  color: #626e83;
+  cursor: pointer;
+  outline: none;
+  text-decoration: underline;
+}
 #results table {
   margin-left: 25vw;
-  margin-top: 5rem;
   width: 50vw;
 }
 #results table tr {

ui/jhtml-compat/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA1DO;EA2DP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAjFK;;AAkFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA9GO;EA+GP;;AAEF;EACC,OA/GQ;EAgHR;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAjIK;;AAkIN;EACC,OAlIK;;AAmIN;EACC,OAvIK;;AAwIP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA9IK;;AA+IN;EACC,OAnJK;;AAoJP;EACC;EACA;;AACA;EACC,kBAzJK;EA0JL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA3DO;EA4DP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAlFK;;AAmFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA/GO;EAgHP;;AAEF;EACC,OAhHQ;EAiHR;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OA9IK;;AA+IN;EACC,OA/IK;;AAgJN;EACC,OApJK;;AAqJP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA3JK;;AA4JN;EACC,OAhKK;;AAiKP;EACC;EACA;;AACA;EACC,kBAtKK;EAuKL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"}

ui/jhtml-compat/index.js

@@ -56,8 +56,14 @@ function dnswatch_search() {
 					table += '</tr>\n'
 				});
 
+				table += '</table>';
+				// randomized response message
+				if (response['data']['randomized_response']) {
+					table += '<small class="random">This domain uses randomized responses. <button>Learn more</button></small>\n';
+				}
+
 				if (response['data']['found']) {   // only if reference confirms
-					table += '<tr></tr>\n';   // spacer
+					table += '<table><tr></tr>\n';   // spacer
 					//// search rows
 					response['data']['search'].forEach(i => {
 						table += '<tr>\n';

ui/raw/index.js

@@ -55,8 +55,14 @@ function dnswatch_search() {
 					table += '</tr>\n'
 				});
 
+				table += '</table>';
+				// randomized response message
+				if (response['data']['randomized_response']) {
+					table += '<small class="random">This domain uses randomized responses. <button>Learn more</button></small>\n';
+				}
+
 				if (response['data']['found']) {   // only if reference confirms
-					table += '<tr></tr>\n';   // spacer
+					table += '<table><tr></tr>\n';   // spacer
 					//// search rows
 					response['data']['search'].forEach(i => {
 						table += '<tr>\n';

ui/raw/index.sass

@@ -51,6 +51,7 @@ input, button
 
 #search
 	text-align: center
+	margin-bottom: 5rem
 	#searchbar
 		.buttonspacer
 			display: inline-block
@@ -122,9 +123,21 @@ input, button
 			vertical-align: -.3rem
 
 #results
+	small.random
+		color: darken($c-fg, 50%)
+		display: block
+		margin-top: 1rem
+		text-align: center
+		button
+			background: none
+			border: none
+			color: darken($c-fg, 40%)
+			cursor: pointer
+			outline: none
+			text-decoration: underline
+
 	table
 		margin-left: 25vw
-		margin-top: 5rem
 		width: 50vw
 		tr
 			height: 3rem