redesign & code BIP39 (#1)

* redesign & code BIP39

* optimize the UI after hide private infomation

* toggle button styles in table

* responsive web design & add filter effect when hide private data

* translate into chinese

* transtate update

* modify meta tag

* decrease container's width

* favicon & site title

* page header

* language test

* layout fine-turning

* Add ignores

* Update compile script

* Correct replace styling behavior

* Add deploy shell script

* Move assets to root, change according image src

* update content: form__recovery_phrase__hint

* Remove `.DS_Store`

* Add Google GA script

* Update favicon tag and 'loading' zh translation

* remove tippyjs

* remove tippyjs files

* remove npm package

Co-authored-by: Franco Chen <chenhuifan.gg@gmail.com>

src/css/app.css

@@ -1,111 +0,0 @@
-body {
-    padding-bottom: 32px;
-}
-.form-control[readonly] {
-    cursor: text;
-}
-.feedback-container {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    text-align: center;
-    z-index: 4;
-}
-.feedback {
-    display: table;
-    padding: 0.5em 1em;
-    background-color: orange;
-    margin: 0 auto;
-    font-size: 2em;
-    color: #444;
-    border: 2px solid #555;
-    border-top: 0;
-    border-bottom-left-radius: 20px 20px;
-    border-bottom-right-radius: 20px 20px;
-}
-.no-border {
-    border: 0;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.0);
-    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.0);
-}
-.phrase {
-    word-break: keep-all;
-}
-.generate-container .strength {
-    /* override mobile width from bootstrap */
-    width: auto!important;
-    display: inline-block;
-}
-.languages a {
-    padding-left: 10px;
-}
-.languages a:nth-of-type(1) {
-    margin-left: -12px;
-    padding-left: 0;
-}
-.monospace {
-    font-family: monospace;
-}
-.entropy-container .filtered,
-.entropy-container .binary {
-    word-wrap: break-word;
-}
-.entropy-container li {
-    padding-bottom: 5px;
-}
-.card-suit {
-    font-size: 19px;
-    line-height: 0;
-}
-.card-suit.club {
-    color: #009F00;
-}
-.card-suit.diamond {
-    color: #3D5DC4;
-}
-.card-suit.heart {
-    color: #F00;
-}
-.card-suit.spade {
-    color: #000;
-}
-.qr-container {
-    position: fixed;
-    top: 0;
-    right: 0;
-    text-align: center;
-    background-color: #FFF;
-    border: 1px solid #CCC;
-}
-.qr-image {
-    margin: 5px;
-}
-.qr-hint,
-.qr-warning {
-    padding: 2px;
-    max-width: 320px;
-}
-.more-info {
-    cursor: help;
-    border-bottom: 1px dashed #000;
-    text-decoration: none;
-}
-.version {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
-.csv {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    white-space: pre;
-    overflow-wrap: normal;
-    overflow-x: scroll;
-    font-family: monospace;
-}
-.visual-privacy .private-data {
-    display: none;
-}
-.text-weight-normal {
-    font-weight: normal !important;
-}

src/css/tailwind.css

@@ -0,0 +1,144 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  code {
+    @apply px-1 text-green-800 rounded bg-green-50 -mx-0.5 py-0.5 -my-0.5;
+  }
+
+  tbody {
+    @apply bg-white divide-y divide-gray-200;
+  }
+
+  td {
+    @apply px-6 py-3 text-sm text-gray-700 whitespace-nowrap;
+  }
+}
+
+@layer utilities {
+  .visual-privacy .private-data,
+  .addresses .invisible {
+    @apply pointer-events-none filter blur-sm;
+  }
+
+  .ok-textarea:read-only,
+  .ok-input:read-only {
+    @apply text-gray-500 bg-gray-200;
+  }
+
+  .qr-image canvas {
+    @apply max-w-[120px] max-h-[120px];
+  }
+
+  .anchor-link-active {
+    @apply text-gray-900 bg-gray-100 hover:bg-gray-100 !important;
+  }
+
+  .anchor-link-active svg {
+    @apply text-gray-500;
+  }
+
+  .entropy-container.hidden + *,
+  .generate-container.hidden + * {
+    @apply mt-0 !important;
+  }
+}
+
+@layer components {
+  .ok-container {
+    @apply max-w-5xl px-4 py-4 pb-8 mx-auto md:py-8 md:px-6 lg:px-8 md:pb-16;
+  }
+
+  .ok-header {
+    @apply flex justify-between mb-8 md:mb-12;
+  }
+
+  .ok-textarea {
+    @apply block w-full placeholder-gray-400 border border-gray-300 rounded-md shadow-sm sm:text-sm focus:ring-green-500 focus:border-green-500;
+  }
+
+  .ok-input {
+    @apply block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm;
+  }
+
+  .ok-label {
+    @apply block text-sm font-medium text-gray-700;
+  }
+
+  .ok-select {
+    @apply block py-2 pl-3 pr-10 text-base border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm;
+  }
+
+  .ok-checkbox {
+    @apply w-4 h-4 mr-2 text-green-600 border-gray-300 rounded shadow-sm focus:ring-green-500;
+  }
+
+  .ok-radio {
+    @apply w-4 h-4 text-green-600 border-gray-300 shadow-sm focus:ring-green-500;
+  }
+
+  .ok-notification {
+    @apply max-w-full p-4 text-gray-900 bg-white rounded-lg shadow-lg pointer-events-auto w-72 ring-1 ring-black ring-opacity-5;
+  }
+
+  .ok-card {
+    @apply bg-white shadow md:border md:border-gray-200 md:rounded-lg;
+  }
+
+  .ok-card__header {
+    @apply flex justify-between px-4 py-5 md:px-6;
+  }
+
+  .ok-card__body {
+    @apply px-4 py-5 space-y-6 border-t border-gray-200 md:px-6;
+  }
+
+  .ok-card__header-title {
+    @apply text-lg font-medium leading-6 text-gray-900;
+  }
+
+  .ok-helper-text {
+    @apply mt-2 text-sm text-gray-500;
+  }
+
+  .ok-helper-text--danger {
+    @apply text-red-600;
+  }
+
+  .ok-tab {
+    @apply block px-1 py-4 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 whitespace-nowrap;
+  }
+
+  .active .ok-tab {
+    @apply text-green-600 border-green-500;
+  }
+
+  .tab-pane {
+    @apply hidden;
+  }
+
+  .tab-pane.active {
+    @apply block;
+  }
+
+  .insert-card {
+    @apply p-3 space-y-6 border border-gray-200 rounded-lg sm:p-6 bg-gray-50;
+  }
+
+  .dropdown {
+    @apply relative self-start;
+  }
+
+  .dropdown__menu {
+    @apply absolute p-1 transition origin-top-right transform scale-95 bg-white border border-gray-300 rounded-lg shadow-lg opacity-0 pointer-events-none -right-2 top-full;
+  }
+
+  .dropdown__menu--active {
+    @apply scale-100 translate-y-2 opacity-100 pointer-events-auto;
+  }
+}

src/css/tippy-lightBorder.css

@@ -0,0 +1 @@
+.tippy-tooltip.light-border-theme{background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,8,16,.15);color:#26323d;box-shadow:0 3px 14px -.5px rgba(0,8,16,.08)}.tippy-tooltip.light-border-theme .tippy-backdrop{background-color:#fff}.tippy-tooltip.light-border-theme .tippy-arrow:after,.tippy-tooltip.light-border-theme .tippy-arrow:before,.tippy-tooltip.light-border-theme .tippy-roundarrow:after,.tippy-tooltip.light-border-theme .tippy-roundarrow:before{content:"";position:absolute;z-index:-1}.tippy-tooltip.light-border-theme .tippy-roundarrow{fill:#fff}.tippy-tooltip.light-border-theme .tippy-roundarrow:after{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0IiB2aWV3Qm94PSIwIDAgMTggNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA3czIuMDIxLS4wMTUgNS4yNTMtNC4yMThDNi41ODQgMS4wNTEgNy43OTcuMDA3IDkgMGMxLjIwMy0uMDA3IDIuNDE2IDEuMDM1IDMuNzYxIDIuNzgyQzE2LjAxMiA3LjAwNSAxOCA3IDE4IDd6IiBmaWxsPSIjMzMzIiBmaWxsLW9wYWNpdHk9Ii4yMzUiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);background-size:18px 7px;width:18px;height:7px;left:0;top:0;fill:rgba(0,8,16,.15)}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-roundarrow:after{top:1px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow{border-top-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:after{border-top:7px solid #fff;top:-7px}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:before{border-top:7px solid rgba(0,8,16,.2);bottom:-1px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-roundarrow:after{top:-1px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow{border-bottom-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:after{border-bottom:7px solid #fff;bottom:-7px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:before{border-bottom:7px solid rgba(0,8,16,.2);bottom:-6px}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-roundarrow:after{left:1px;top:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow{border-left-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:after{border-left:7px solid #fff;left:-7px}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:before{border-left:7px solid rgba(0,8,16,.2);left:-6px}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-roundarrow:after{left:-1px;top:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow{border-right-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:after{border-right:7px solid #fff;right:-7px}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:before{border-right:7px solid rgba(0,8,16,.2);right:-6px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-roundarrow,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-roundarrow{-webkit-transform:translateX(-1px);transform:translateX(-1px)}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:before,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:before{left:-7px;border-left:7px solid transparent;border-right:7px solid transparent}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-roundarrow,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-roundarrow{-webkit-transform:translateY(-1px);transform:translateY(-1px)}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:before,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:before{top:-7px;border-top:7px solid transparent;border-bottom:7px solid transparent}