feat: change style with modern UI

index.html

@@ -20,53 +20,53 @@
       <div class="container">
         <div class="card">
           <h1 class="mt-0">Custom Key Wallet Crypto</h1>
-          <p>author: damartripamungkas</p>
+          <p>creator: damartripamungkas</p>
           <p>donation address: 0x106afd8f747687876fa9b096ff20a78620621af3</p>
           <a href="https://github.com/damartripamungkas/custom-key-wallet-crypto"
-            >https://github.com/damartripamungkas/custom-key-wallet-crypto</a
+            >repository: https://github.com/damartripamungkas/custom-key-wallet-crypto</a
           >
         </div>
 
         <div class="card">
-          <p class="mt-0">Reinforcement Before iterations</p>
+          <p class="mt-0 mb-0-5">Reinforcement Before iterations</p>
           <select id="select-1" aria-label="select-1">
             <option value="1" selected>
               1. keccak256(words) + sha512(words.slice(0, words.length / 2))
             </option>
             <option value="2">disable</option>
           </select>
 
-          <p class="pt-10">Number of iterations</p>
+          <p class="pt-10 mb-0-5">Number of iterations</p>
           <input id="input-1" type="number" value="3" aria-label="input-1" />
 
-          <p class="pt-10">Enter the words you want to use</p>
-          <textarea class="text-area" id="input-2" aria-label="input-2"></textarea>
+          <p class="pt-10 mb-0-5">Enter the words you want to use</p>
+          <textarea id="input-2" aria-label="input-2"></textarea>
 
-          <p class="pt-10">Result privatekey with and without prefix 0x</p>
+          <p class="pt-10 mb-0-5">Result privatekey with and without prefix 0x</p>
           <textarea
             class="w-full click-able"
             id="result-1"
-            placeholder="privatekey with prefix 0x ..."
+            placeholder="privatekey with prefix 0x.."
             aria-label="result-1"
             disabled
           ></textarea>
           <textarea
             class="w-full click-able mt-2-5"
             id="result-2"
-            placeholder="privatekey ..."
+            placeholder="privatekey.."
             aria-label="result-2"
             disabled
           ></textarea>
 
           <div class="pt-10 btn-text-area">
-            <button>Address evm</button>
             <input
               class="click-able"
               id="result-3"
-              placeholder="address wallet evm like ethereum, bsc, arbitrum or other ..."
+              placeholder="address wallet evm.."
               aria-label="result-3"
               disabled
             />
+            <button id="copy-address-evm">Address evm</button>
           </div>
         </div>
       </div>
@@ -156,6 +156,13 @@ <h1 class="mt-0">Custom Key Wallet Crypto</h1>
       };
 
       input2.oninput = hashNow;
+
+      const btnCopyEvm = document.getElementById("copy-address-evm");
+      btnCopyEvm.oninput = () => {
+        result3.select();
+        result3.setSelectionRange(0, 99999); // For mobile devices
+        navigator.clipboard.writeText(result3.value);
+      };
     </script>
   </body>
 </html>

public/css/style.css

@@ -1,32 +1,77 @@
+@font-face {
+  font-family: "SpaceMonoRegular";
+  src: url(../font/SpaceMono-Regular.ttf) format("truetype");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "SpaceMonoRegular";
+  font-size: 0.95rem;
+  font-weight: 500;
   background-color: #f2f2f2;
 }
 
 @media screen and (max-width: 576px) {
   a {
-    font-size: small;
+    /* font-size: small; */
   }
 
   p {
-    font-size: small;
+    /* font-size: small; */
   }
 }
 
+p {
+  color: #252525;
+  margin: 0;
+  overflow-wrap: break-word;
+}
+
+a {
+  color: #252525;
+  margin: 0;
+  text-decoration: none;
+  overflow-wrap: break-word;
+}
+
 textarea {
-  border-radius: 0.25rem;
+  color: #252525;
+  outline-style: dashed;
+  outline-width: 1px;
+  padding: 0.25rem;
+  width: 100%;
+  font-size: large;
+  min-height: 3rem;
 }
 
 input {
+  color: #252525;
   font-size: medium;
-  border-radius: 0.25rem;
   min-height: 1.25rem;
+  outline-style: dashed;
+  outline-width: 1px;
+  padding: 0.25rem;
+}
+
+button {
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+  padding-left: 0.8rem;
+  padding-right: 0.8rem;
+  cursor: pointer;
+  outline-style: dashed;
+  outline-width: 1px;
+  background-color: 240 5.9% 10%;
 }
 
 select {
-  border-radius: 0.25rem;
   font-size: medium;
   width: 200px;
+  outline-style: dashed;
+  outline-width: 1px;
+  padding: 0.25rem;
 }
 
 .btn-text-area {
@@ -35,43 +80,33 @@ select {
 }
 
 .btn-text-area button {
-  border-radius: 0.3rem 0 0 0.3rem;
-  border: 1px solid #ccc;
   flex: 1;
+  max-width: 20%;
 }
 
 .btn-text-area input {
-  border-radius: 0 0.3rem 0.3rem 0;
   flex: 2;
   text-align: center;
   border: 1px solid #ccc;
-  height: 2rem;
+  height: 1.25rem;
+  min-width: 100%;
   white-space: normal;
   word-wrap: break-word;
   overflow-y: hidden;
-  /* padding-top: 12px; */
-}
-
-.text-area {
-  width: 100%;
-  min-height: 3rem;
-  border: 1px solid #ccc;
-  font-size: large;
-  font-family: monospace;
 }
 
 .container {
-  max-width: 60rem;
+  max-width: 40rem;
   margin: 0 auto;
 }
 
 .card {
-  border: 1px solid #ccc;
+  outline-style: solid;
+  outline-width: 1px;
   padding: 30px;
   margin-bottom: 15px;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   background-color: #fff;
-  border-radius: 0.5rem;
+  text-align: left;
 }
 
 .pt-10 {
@@ -86,6 +121,10 @@ select {
   margin-top: 0.625rem;
 }
 
+.mb-0-5 {
+  margin-bottom: 0.2rem;
+}
+
 .mt-0 {
   margin-top: 0;
 }