From 662cdbd5de87023609aced867277e3fc102afda4 Mon Sep 17 00:00:00 2001
From: Peter Harpending <peter@harpending.org>
Date: Fri, 28 Apr 2023 18:43:59 -0600
Subject: [PATCH] jrx prettification

---
 jrx/README.md             |  5 +++
 jrx/ext/icons/keypair.svg | 82 +++++++++++++++++++++++++++++++++++++++
 jrx/popup.html            | 56 ++++++++++++++++----------
 3 files changed, 122 insertions(+), 21 deletions(-)
 create mode 100644 jrx/README.md
 create mode 100644 jrx/ext/icons/keypair.svg

diff --git a/jrx/README.md b/jrx/README.md
new file mode 100644
index 0000000..86e696c
--- /dev/null
+++ b/jrx/README.md
@@ -0,0 +1,5 @@
+# Jack Russell Extension
+
+## File Tree
+
+
diff --git a/jrx/ext/icons/keypair.svg b/jrx/ext/icons/keypair.svg
new file mode 100644
index 0000000..54435c1
--- /dev/null
+++ b/jrx/ext/icons/keypair.svg
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="58.125977mm"
+   height="72.096077mm"
+   viewBox="0 0 205.95818 255.45854"
+   id="svg9409"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="keys.svg">
+  <defs
+     id="defs9411" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.49497475"
+     inkscape:cx="160.01489"
+     inkscape:cy="164.22131"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="10"
+     fit-margin-left="10"
+     fit-margin-right="10"
+     fit-margin-bottom="10"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata9414">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-196.25559,-523.66347)">
+    <g
+       id="g10042">
+      <path
+         sodipodi:nodetypes="csssssssccsssscc"
+         inkscape:connector-curvature="0"
+         id="path9968"
+         d="m 315.25325,613.14606 c -0.29262,-0.4739 -1.5776,-1.98932 -2.32086,-2.78166 -1.33012,-1.41797 -3.604,-4.89843 -5.05305,-7.73437 -5.63927,-11.0366 -2.59182,-27.00434 6.80727,-35.66813 6.51953,-6.00948 11.49553,-7.83769 21.40713,-7.86507 10.14581,-0.028 15.06869,1.97243 22.06089,8.96463 10.74212,10.74212 11.55568,28.73483 1.85421,41.00811 -3.63801,4.60242 -9.75818,8.8503 -14.44651,10.02699 -1.32758,0.3332 -3.04222,0.93057 -3.21774,1.53821 -0.66216,-1.26559 -1.23504,-2.70974 -1.8972,-3.97532 0.70691,0.009 2.75066,-0.45614 4.73624,-1.21445 6.86951,-2.62353 11.44485,-6.63296 14.86294,-13.02475 12.54014,-23.44981 -12.63238,-49.12353 -36.48024,-37.2066 -13.72981,6.86086 -19.0506,24.01583 -11.66027,37.5943 2.48595,4.56751 6.63075,8.5702 8.57706,8.87995 -1.29686,1.46819 -2.7723,1.59711 -5.22987,1.45816 z"
+         style="fill:#1b2944;fill-opacity:1" />
+      <path
+         sodipodi:nodetypes="cssscsssssssssscccsssssssssc"
+         inkscape:connector-curvature="0"
+         id="path9968-4"
+         d="m 343.53337,621.73553 c 2.32723,8.20833 2.59757,11.49492 1.47022,17.87567 -0.64257,3.63692 -1.7159,7.68584 -2.38517,8.9976 -2.16096,4.23544 -10.16448,11.83676 -14.49662,13.76813 -4.35931,1.94348 -9.34541,3.47804 -10.5037,3.23271 -0.36473,-0.0772 -0.93633,1.31572 -1.27022,3.0955 -0.35938,1.91566 -1.29106,3.45305 -2.28349,3.76804 -1.22133,0.38763 -1.9828,2.24144 -2.80499,6.82883 -0.72381,4.03845 -2.31754,8.26922 -4.44376,11.79647 -3.21513,5.3337 -3.28394,5.64498 -2.27975,10.3125 1.27578,5.92987 -0.51015,14.6505 -3.69447,18.04006 -1.67765,1.78578 -1.9058,2.6396 -1.1601,4.34159 1.25946,2.8746 0.0144,8.0611 -2.32922,9.70262 -1.05437,0.73852 -2.05009,2.4975 -2.2127,3.90887 -0.21652,1.87927 -1.17394,2.9733 -3.57691,4.08734 -6.06121,2.81004 -7.02068,2.86337 -9.22873,0.51301 l 0,3e-5 -2.07194,-2.20548 6.63072,-30.8501 c 3.6469,-16.96756 7.03542,-32.37966 7.53006,-34.2491 0.49464,-1.86944 1.09292,-4.61163 1.32952,-6.09375 0.23659,-1.48212 0.69838,-3.81758 1.0262,-5.1899 0.46758,-1.95743 0.15878,-2.72914 -1.43293,-3.581 -2.83815,-1.51893 -0.8645,-4.03738 2.23922,-2.85734 1.16979,0.44475 4.1957,0.62454 6.72426,0.39952 14.46302,-1.28704 24.65304,-7.96371 31.02602,-20.32877 2.09371,-4.06229 2.58677,-6.43504 2.92094,-14.0564 0.33509,-7.64257 0.59778,-8.90139 1.57785,-7.56108"
+         style="fill:#3abbba;fill-opacity:1" />
+      <path
+         sodipodi:nodetypes="cssssssssssscsssssssssssscsscc"
+         inkscape:connector-curvature="0"
+         id="path9968-1"
+         d="m 320.89502,611.1725 c 1.37715,-1.37715 -0.94795,-6.35496 -3.97523,-8.51057 -2.56169,-1.82408 -5.20227,-7.89332 -4.59663,-10.56511 0.52934,-2.33522 7.85471,1.58227 13.54828,7.24541 19.90951,19.80311 5.10846,54.62272 -23.05895,54.24643 -3.35156,-0.0448 -6.73614,-0.35744 -7.52129,-0.69481 -0.96711,-0.41555 -1.96694,0.29973 -3.09988,2.21765 -1.12707,1.90798 -2.41138,2.83103 -3.93901,2.83103 -1.52452,0 -2.70319,0.84413 -3.5999,2.57812 -1.52232,2.94377 -8.06649,9.89403 -12.57882,13.35938 -2.32513,1.78564 -3.23865,3.38925 -3.83625,6.73424 -0.97293,5.44589 -6.17735,12.95784 -10.22812,14.76308 -2.42805,1.08205 -3.01525,1.89683 -3.04042,4.21875 -0.0355,3.27105 -2.38956,6.54819 -5.38731,7.49964 -1.11793,0.35481 -2.84259,1.67487 -3.8326,2.93346 -1.52763,1.94206 -2.59879,2.28833 -7.0789,2.28833 -4.80394,0 -5.36117,-0.21637 -6.1932,-2.40478 -1.38131,-3.6331 -1.19927,-4.29237 2.60133,-9.42112 1.93359,-2.60929 7.94531,-11.15859 13.35937,-18.99843 5.41406,-7.83983 11.95313,-17.17904 14.53125,-20.75377 7.26117,-10.06809 10.07143,-14.91383 9.50511,-16.38965 -0.28564,-0.74437 0.0314,-2.94418 0.70451,-4.88845 1.04209,-3.01001 1.00894,-4.0235 -0.22319,-6.8238 -2.26983,-5.15866 -1.98045,-18.12932 0.52761,-23.64865 4.2291,-9.30673 14.82,-17.62157 24.31797,-19.09187 l 3.8945,-0.60288 0.6785,7.24062 c 0.58108,6.20095 1.08512,7.70372 3.51029,10.46584 2.56921,2.92616 7.0234,5.94194 8.77604,5.94194 2.70966,0.1676 4.03036,-0.0436 6.23494,-1.77003 z"
+         style="fill:#ff681e;fill-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/jrx/popup.html b/jrx/popup.html
index cb99a42..af53d7f 100644
--- a/jrx/popup.html
+++ b/jrx/popup.html
@@ -1,38 +1,52 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="utf-8">
+    <!--
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="./ext/bootstrap-5.3.0-alpha3-dist/css/bootstrap.min.css">
+    -->
+    <style type="text/css">
+        body {
+            background:  #d6efff;
+            width: 400px;
+            font-family: monospace, sans-serif;
+        }
+    </style>
 </head>
 
 <body>
 
-<h1>Jack Russell</h1>
+<table width="100%" style="background: #dad1ff; border: 2px solid #6c5d96; border-radius: 5px;">
+    <tr>
+        <td><img src="./icons/jrx-icon-48.png" style="width: 32px; height: 32px;"></td>
+        <td style="font-size: 32px; text-align: center; font-weight: bold">
+            JÆCK RUSSELL
+        </td>
+    </tr>
+</table>
 
-<button id="mk-detectable">Make Wallet Detectable for 2 Minutes</button>
-<br>
-
-<h2>Keypairs</h2>
-
-    <p id="no-keypairs" hidden>No keypairs yet. Click the button below to generate one.</p>
-    <br>
-
-    <ul id="keypairs" hidden></ul>
-    <br>
-
-    <button id="generate">Generate New Keypair</button>
-    <br>
-
-    <button id="recover" disabled>Recover Key Tree from Seed Phrase (NYI)</button>
-
-
-<h2>Log</h2>
-    <pre id="log"></pre>
+<div style="margin-top: 5px; width: 95%; background: #d9ffd6; border: 1px solid #6c5d96; border-radius: 5px;">
+    <table >
+        <tr>
+            <td><img src="./ext/icons/keypair.svg" style="width: 32px; height: 32px;"></td>
+            <td style="justify-content: center; font-size: 28px; text-align: center; font-weight: bold">
+                KEYPAIRS
+            </td>
+        </tr>
+    </table>
+</div>
 
 
 <!-- including nacl here -->
 <script src="nacl.js"></script>
 <script type="module" src="dist/popup.js"></script>
 
+<!--
+    bootstrap etc
+    <script src="./ext/popper-2.11.7/popper.min.js"></script>
+    <script src="./ext/bootstrap-5.3.0-alpha3-dist/js/bootstrap.min.js"></script>
+-->
 
 </body>
 </html>