update

Author: STICKnoLOGIC

index.html

@@ -68,7 +68,7 @@ <h2>Check SubDomain Availability</h2>
             </div>
             </div>
             <div class="search-result-cntnr">
-                <div id="result-card" class="hiddens" style="width:100%;margin:4-x;padding:8px">
+                <div id="result-card" class="hiddens result-card" style="width:100%;margin:4px;padding:8px">
                         <div style="display:flex; align-items:center;justify-content:start;gap:1rem;width:100%">
                             <img id="user-avatar" alt="user-avatar" src="http://github.com/wdhdev.png?size=64">
                             <div style="display:flex;flex-direction:column;width:100%">
@@ -147,7 +147,6 @@ <h2>Donations</h2>
                         result_none.classList.toggle('hidden');
                 })
                 .catch(()=>{
-                    print(1111);
                     if (result_error.classList.contains('hidden')) result_error.classList.toggle('hidden');
                 }).finally(()=>{
                     is_searching=false;

styles/main.css

@@ -1,10 +1,11 @@
 html,
 body {
-    --header-bg: linear-gradient(90deg, #1a1331, #4e3aa3);
+    --header-bg: linear-gradient(90deg, #1a1331, var(--hover-bg));
     --accent: #7041ff;
     --body-fg: #d1c4ff;
     --hover-bg: #4e3aa3;
     --hover-accent: #9b7dff;
+    --card-border: linear-gradient(to right,#1a1331 0%,#4e3aa3 100%) 1;
 
     margin: 0;
     padding: 0;
@@ -126,8 +127,16 @@ input{
     color: var(--body-fg);
     font-size: 1.2rem;
     padding: 4px;
-    border: 0 solid #0f0c19;
-    background-image: linear-gradient(#0f0c19, #0f0c19);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-width: 5px;
+    border-image: var(--card-border);
+    background-color:#0f0c19;
+    /* background-image: linear-gradient(#0f0c19, #0f0c19); */
+}
+
+input:focus{
+outline-style: none;
 }
 
 input::placeholder{
@@ -138,25 +147,40 @@ input::placeholder{
     font-family: "Ubuntu Mono Regular";
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
-    gap: 8px;
+    justify-content: center;
+    align-items: stretch;
     padding: 4px;
-    background: var(--header-bg);
-    border-radius: 4px;
 }
 .search-btn{
     cursor: pointer;
-    padding-right: 8px;
-    font-weight: 700;
+    padding-right: 16px;
+    font-weight: 400;
     font-size: 1rem;
+    padding-left: 24px;
+    background-color: var(--hover-bg);
+    align-items: center;
+    align-content: center;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
     /* make unselectable text */
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 
+.result-card{
+    padding: 1rem;
+    border: double 1em transparent;
+    border-style: solid;
+    border-image: var(--card-border);
+    border-style: solid;
+    border-width: 4px;
+    border-radius: 1rem;
+    background-clip: padding-box, border-box;
+    background-origin: border-box;
+}
+
 .hidden{
     display: none;
 }