website: Hide inputs while pyscript is loading

docs/index.html

@@ -13,12 +13,18 @@
     <header>
         <h1>Neural Network Domain Validator</h1>
     </header>
-    <label for="url-input">Website URL</label>
-    <input type="text" id="url-input" placeholder="Website URL">
-    <button py-click="get_url">Check URL</button>
-    <p id="progress-text">Loading pyscript. Please wait...</p>
-    <p id="result-text"></p>
-    <script type="py" src="./main.py" config="./pyscript.json"></script>
+    <main>
+        <div class="card">
+            <div class="input-container" id="input-container">
+                <label for="url-input">Website URL</label>
+                <input type="text" id="url-input" placeholder="Website URL">
+                <button py-click="get_url">Check URL</button>
+                <p id="result-text"></p>
+            </div>
+            <p id="progress-text">Loading pyscript. Please wait...</p>
+            <script type="py" src="./main.py" config="./pyscript.json"></script>
+        </div>
+    </main>
 </body>
 
 </html>

docs/main.css

@@ -1,3 +1,16 @@
 body {
     text-align: center;
+}
+
+div.card {
+    background-color: white;
+    border: 2px solid black;
+    border-radius: 16px;
+    padding: 1em;
+    width: 30vw;
+    margin: auto;
+}
+
+div.input-container {
+    display: none;
 }

docs/main.py

@@ -5,10 +5,15 @@
 from sklearn.preprocessing import StandardScaler
 from scipy.sparse import hstack
 import os
+from pyweb import pydom
+
+# Get the input container element
+input_container = pydom['#input-container']
+input_container.style["display"] = "block"
 
 # Get the progress text HTML element
 progress_text = document.querySelector("#progress-text")
-progress_text.innerText = "Pyscipt loaded."
+progress_text.innerText = ""
 
 # Gets the model and returns it
 def load_files():