Interface improvements (#74)

* fix: interface style improvements

and components in ejs templates

* fix: improvement of improvements

* Redesign: kind of MD3

* Working url/search switch

* formatting

* Add switch animation, adjust sizes, adjust btn colors, rename bg2 to outline

* Format

---------

Co-authored-by: DarkCat09 <gh@dc09.ru>

templates/components/form-main.ejs

@@ -0,0 +1,51 @@
+<% search = config.search.enabled %>
+
+<% if (search) { %>
+
+  <input type="checkbox" id="switch-search" checked>
+
+  <label for="switch-search" class="switch-label">
+    <span>URL</span>
+    <span class="switch-btn"></span>
+    <span>Search</span>
+  </label>
+
+  <form action="/search" method="get" class="input-grid main-form-search">
+    <div class="input">
+      <input type="text" name="q" id="search" placeholder="Search">
+    </div>
+    <div class="input">
+      <input type="submit" id="submit" class="button" value="Go">
+    </div>
+  </form>
+
+<% } %>
+
+<form action="/get" method="get" class="input-grid <%= search ? "main-form-url" : "" %>">
+  <div class="input">
+    <input type="text" name="url" id="url" placeholder="URL">
+  </div>
+  <div class="input">
+    <input type="submit" id="submit" class="button" value="Parse">
+  </div>
+  <div class="input-row">
+    <div class="input">
+      <label for="engine">Engine</label>
+      <select name="engine">
+        <option value="" selected>Default</option>
+        <% engineList.forEach((engine) => { %>
+          <option value="<%= engine %>">
+            <%= engine %>
+          </option>
+          <% }) %>
+      </select>
+    </div>
+    <div class="input">
+      <label for="format">Format</label>
+      <select name="format">
+        <option value="html" selected>HTML</option>
+        <option value="text">Text</option>
+      </select>
+    </div>
+  </div>
+</form>

templates/components/menu.ejs

@@ -0,0 +1,14 @@
+<div class="menu">
+  <a class="button secondary" href="/">Home</a>
+  <a class="button secondary" href="<%= remoteUrl %>">Original page</a>
+  <% 
+    if (config.search.enabled) {
+      %>
+      <form class="form-search" action="/search" method="get">
+        <input type="text" name="q" id="search" placeholder="Search">
+        <input class="button" type="submit" value="Go"/>
+      </form>
+      <%
+    }
+  %>
+</div>

templates/components/search-styles.ejs

@@ -0,0 +1,6 @@
+<% 
+  if (config.search.enabled) {
+    %><link rel="stylesheet" href="/static/search.css">
+    <link rel="stylesheet" href="/static/form-inputs.css"><%
+  }
+%>