add check function and reserved domain checker

todo: display

Author: STICKnoLOGIC

index.html

@@ -62,8 +62,8 @@ <h3>Grab your own sweet-looking <span>.is-a.dev</span> subdomain.</h3>
 
             <h2>Check SubDomain Availability</h2>
             <div class="search-cntnr">
-                <input id="search-domain" type="text" onkeyup="check()" placeholder="Check domain name e.g. william">
-            <div id="search-btn" class="search-btn" onclick="check()">
+                <input id="search-domain" type="text" placeholder="Check domain name e.g. william">
+            <div id="search-btn" class="search-tip">
                 Check
             </div>
             </div>
@@ -82,6 +82,7 @@ <h2 id="user-name" style="line-height:1rem">William</h2>
                 </div>
                 <p id="result-none" class="hidden">Nice! The subdomain is still available, <a href="https://docs.is-a.dev">read more here</a> to register the subdomain!</p>
                 <p id="result-error" class="hidden">An Error Occurred while checking the subdomain, please try again...</p>
+                <p id="result-reserved" class="hidden">Unfortunately, this domain you are searching is reserved by the developer for development purposes...</p>
             </div>
 
             <h2>Important Links</h2>
@@ -114,10 +115,14 @@ <h2>Donations</h2>
         </main>
         <script>
             let is_searching=false;
+            let timer_search=undefined;
+            let reserved_domain=undefined;
+            const search_domain=document.getElementById('search-domain');
             // result containers
             const result_card=document.getElementById('result-card');
             const result_none=document.getElementById('result-none');
             const result_error=document.getElementById('result-error');
+            const result_reserved=document.getElementById('result-reserved');
             // user propagate
             const user_avatar=document.getElementById('user-avatar');
             const user_gh_link=document.getElementById('user-gh-link');
@@ -126,7 +131,12 @@ <h2>Donations</h2>
             const user_info=document.getElementById('user-info');
 
             function check(){
-                var search=document.getElementById('search-domain').value.trim().replace(' ','-').toLowerCase()
+                var search=search_domain.value.trim().replace(' ','-').toLowerCase();
+                if(its_reserved(search)){
+                    hide_results();
+                    result_reserved.classList.toggle('hidden');
+                    return;
+                }
                 if(search ==='' || is_searching) return;
                 is_searching=true;
                 fetch('https://raw.githubusercontent.com/is-a-dev/register/main/domains/'+search+'.json')
@@ -146,11 +156,11 @@ <h2>Donations</h2>
                     else if (result_none.classList.contains('hidden')) 
                         result_none.classList.toggle('hidden');
                 })
-                .catch(()=>{
+                .catch((reason)=>{
                     if (result_error.classList.contains('hidden')) result_error.classList.toggle('hidden');
                 }).finally(()=>{
                     is_searching=false;
-                })
+                });
             }
 
             function propagate_result(data){
@@ -169,7 +179,56 @@ <h2>Donations</h2>
                 if (!result_card.classList.contains('hidden')) result_card.classList.toggle('hidden');
                 if (!result_none.classList.contains('hidden')) result_none.classList.toggle('hidden');
                 if (!result_error.classList.contains('hidden')) result_error.classList.toggle('hidden');
+                if (!result_reserved.classList.contains('hidden')) result_reserved.classList.toggle('hidden');
+            }
+
+            function its_reserved(domain){
+                var s= reserved_domain.filter(function(pattern) {
+                        if(pattern.includes('['))
+                            return new RegExp(pattern).test(domain);
+                        else
+                            return domain===pattern;
+                        });
+                return s.length > 0;
+            }
+
+            function fetch_reserve(){
+                if(reserved_domain === undefined){
+                    if (timer_search!==undefined)
+                        clearInterval(timer_search);
+                    fetch('https://raw.githubusercontent.com/is-a-dev/register/main/util/reserved.json')
+                    .then(response => {
+                        if(!response.ok)
+                            throw new Error('Something went wrong');
+                        return response.json();
+                    })
+                    .then(data => {
+                        reserved_domain=data;
+                        timer_search=setTimeout(()=>check(this.value),300);
+                    })
+                    .catch((reason)=>{
+                        
+                    });
+                    return;
+                }
             }
+
+            search_domain.addEventListener('input', function (evt) {
+                if(this.value===''){
+                    if (timer_search!==undefined){
+                        clearInterval(timer_search);
+                    }
+                    hide_results();
+                    return;
+                }
+
+                if (timer_search!==undefined)
+                    clearInterval(timer_search);
+
+                timer_search=setTimeout(()=>check(this.value),300);
+            });
+
+            fetch_reserve();
         </script>
     </body>
 </html>

styles/main.css

@@ -126,12 +126,13 @@ input {
     width: 100%;
     color: var(--body-fg);
     font-size: 1.2rem;
-    padding: 4px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-width: 5px;
-    border-image: var(--card-border);
-    background-color: #0f0c19
+    padding: 8px;
+    border-width: 1px;
+    border-radius: 4px;
+    border: 5px solid #0000;
+    /* background-color: #0f0c19 */
+    background: conic-gradient(#0f0c19 0 0) padding-box,linear-gradient(90deg,#1a1331,#4e3aa3) border-box;
+
 }
 
 input:focus {
@@ -145,20 +146,16 @@ input::placeholder {
 .search-cntnr {
     font-family: "Ubuntu Mono Regular";
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: stretch;
     align-self: center;
-    padding: 4px
 }
 
-.search-btn {
-    cursor: pointer;
-    padding-right: 16px;
-    font-weight: 400;
+.search-tip {
     font-size: 1rem;
     padding-left: 8px;
-    background-color: var(--hover-bg);
+    font-style: italic;
     align-items: center;
     align-content: center;
     border-top-right-radius: 8px;
@@ -197,6 +194,13 @@ input::placeholder {
     display: none;
 }
 
+/* adjust body padding when using mobile devices */
+@media (max-width: 480px) {
+    body{
+        padding: 0;
+    }
+}
+
 /* Carbon Ads */
 #carbonads {
     padding-top: 20px;