Add more CSS magic and input for URL

src/static/crawl.html

@@ -13,6 +13,7 @@
       name="description"
       content="Tris - A simple and free web crawler. Tris recursively crawls a website's domain HTML pages and collect its links, built by Vedran Mandić."
     />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
     <link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico" />
     <link rel="manifest" href="/static/manifest.json" />
     <!-- Open Graph meta tags for social media sharing -->

src/static/css/styles.css

@@ -1,29 +1,70 @@
 :root {
-  font-size:  15px;
+  font-size: 15px;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Raleway", Verdana, sans-serif;
+}
+
+input[type="url"] {
+  border: 1px solid #999;
+  padding: .2rem .4rem;
+  width: 30vw;
+  outline: none;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+input[type="url"]:hover {
+  border-color: 1px solid #666;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.25);
+}
+
+input[type="submit"] {
+  padding: .3rem .6rem;
+  background-color: #eee;
+  transition: background-color 0.3s ease;
+}
+
+input[type="submit"]:hover {
+  background-color: #aaa;
+  cursor: pointer;
 }
 
 .container {
   max-width: 100%;
 }
 
 a {
-  color: rgb(112, 71, 200);
+  color: #dc143c;
+  background-color: #eee;
+  position: relative;
+  display: inline-block;
+  transition: transform 0.3s ease;
+  padding: 0 .4rem;
 }
 
 a:hover {
-  color: rgb(64, 40, 117);
+  color: #6e091e;
+  transform: skew(0, 1deg);
 }
 
+
 h1 {
   font-size: 2rem;
   font-weight: bold;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 h2 {
   font-size: 1.2rem;
   font-weight: bold;
-  margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
 pre {
@@ -33,7 +74,7 @@ pre {
 
 span.result {
   display: inline-block;
-  margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
 header {
@@ -46,14 +87,33 @@ header {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+label input[type="checkbox"] {
+  display: inline-block;
+  position: relative;
+  top: 3px;
+}
+
+footer {
+  background: #eee;
+}
+
+footer a { 
+  padding: 0 
+};
+
 @media (max-width: 768px) {
   :root {
     font-size: 12px;
   }
-}
 
-label input[type="checkbox"] {
- display: inline-block;
- position: relative;
- top: 3px;
+  input[type="url"] {
+    width: 100%;
+    margin: .4rem 0;
+    display: block;
+  }
+
+  input[type="submit"] {
+    width: 100%;
+    display: block;
+  }
 }

src/static/index.html

@@ -11,6 +11,7 @@
       name="description"
       content="Tris - A simple and free web crawler. Tris recursively crawls a website's domain HTML pages and collect its links, built by Vedran Mandić."
     />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
     <link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico" />
     <link rel="manifest" href="/static/manifest.json" />
     <!-- Open Graph meta tags for social media sharing -->
@@ -92,14 +93,17 @@ <h3 class="text-lg mb-4 font-bold">How to use:</h3>
       </p>
       <br />
       <p>
-        Navigate to the following link (or modify the url query string
-        parameter) to start crawling it by using the settings stated below:
-        <a id="crawl-link" href="/crawl?url=https://www.index.hr">
-          <span id="crawl-link-text"></span>
-        </a>
-        <br />
+        Navigate or modify the target domain to start crawling it by using the settings stated below.
+        <div class="my-4">
+          <form method="GET" action="/crawl">
+            <label><strong>Start crawling target URL:</strong>
+              <input type="url" id="crawl-url" name="url" required minlength="4" value="https://www.index.hr"
+              autocomplete="off" />
+            </label>
+            <input type="submit" value="Crawl" />
+          </form>
+        </div>
       </p>
-      <br />
       <h3 class="text-lg mb-4 font-bold">Current crawler settings:</h3>
       <pre class="text-xs" id="settings">Loading settings...</pre>
       <br />
@@ -112,14 +116,17 @@ <h3 class="text-lg mb-4 font-bold">Source Code:</h3>
           >https://github.com/vmandic/tris-simple-spider-scraper</a
         >
       </p>
+    </div>
+    <footer class="p-2 py-4">
       <h3>
-        Built by: Vedran Mandić with ❤️️,
+        Built by Vedran Mandić (<a href="https://hachyderm.io/@vekzdran">@[email protected]</a>) with ❤️️
+        <br/>
         <a
           href="https://github.com/vmandic/tris-simple-spider-scraper/releases/tag/v1.2.1"
           >v1.2.1</a
         >
       </h3>
-    </div>
+    </footer>
     <script src="/static/js/index.js"></script>
   </body>
 </html>

src/static/js/index.js

@@ -15,12 +15,6 @@ const loadCrawlerSettings = () => {
   xhr.send();
 };
 
-const setCrawlLink = () => {
-  const absoluteLink = document.querySelector("#crawl-link").getAttribute("href");
-  document.querySelector("#crawl-link-text").innerHTML = window.location.origin + absoluteLink;
-};
-
 document.addEventListener("DOMContentLoaded", function () {
-  setCrawlLink();
   loadCrawlerSettings();
 });