website: Only test the URL that the user entered

Also: * Updated models * Some style improvements
tedgravlin · Dec 3, 2023 · c8dcecb · c8dcecb
1 parent 1afea3a
commit c8dcecb
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 13 deletions.
diff --git a/docs/assets/SinkinSans-900XBlack.otf b/docs/assets/SinkinSans-900XBlack.otf
diff --git a/docs/assets/background.png b/docs/assets/background.png
diff --git a/docs/index.html b/docs/index.html
@@ -10,8 +10,11 @@
 </head>
 
 <body>
+    <div class="background-blur">
+    </div>
     <header>
-        <h1>Neural Network Domain Validator</h1>
+        <h1>DOMAIN VALIDATOR</h1>
+        <p>Built with a Neural Network </p>
     </header>
     <main>
         <div class="card">

diff --git a/docs/main.css b/docs/main.css
@@ -1,31 +1,59 @@
 :root {
-    --background-color: white;
-    --card-color: white;
-    --text-color: black;
+    --main-color: #579CD9;
 }
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background-color: black;
-        --card-color: #121212;
-        --text-color: white;
-    }
+@font-face {
+    font-family: "silkin-sans";
+    src: url("./assets/SinkinSans-900XBlack.otf");
 }
+
 body {
-    background-color: var(--background-color);
-    color: var(--text-color);
+    margin: 0;
+    color: var(--main-color);
     text-align: center;
     font-family: Arial, Helvetica, sans-serif;
+    background-image: url(./assets/background.png);
+}
+
+header {
+    padding: 1em 0 4em 0;
+    color: var(--main-color);
+}
+
+header h1 {
+    font-family: silkin-sans;
+    margin: 0;
+    font-size: 3em;
+    margin: 0 0 -10px 0;
+    font-weight: bold;
+}
+
+header p {
+    font-weight: bold;
+    color: var(--main-color);
+    margin: 0;
 }
 
 div.card {
-    background-color: var(--card-color);
     border: 2px solid var(--text-color);
     border-radius: 16px;
     padding: 1em;
     width: 30vw;
     margin: auto;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: var(--main-color);
+    border-radius: 32px;
+    padding: 1em 2em 2em 2em;
 }
 
 div.input-container {
     display: none;
+}
+
+div.background-blur {
+    position: fixed;
+    z-index: -1;
+    height: 100vh;
+    width: 100vw;
+    backdrop-filter: blur(25px) brightness(70%);
+    -webkit-backdrop-filter: blur(25px) brightness(70%);
 }