Add search and update css

index.html

@@ -24,11 +24,17 @@
       <h1 id="header-time">00:00</h1>
       <h2 id="header-date">Date</h2>
       <div id="header-quote">Thinking</div>
-      <div class="randompic"> </div>
+      <!--<div class="randompic"> </div>-->
+      <div id="search" class="searchbar">
+        <input type="text" class="searchbox" name="q" title="Search Google"
+        placeholder="Search..." id="main-search" spellcheck="false"
+        autocomplete="off" size="40" maxlength="255" />
+        <ul class="search-engines"></ul>
+      </div>
     </section>
     <section id="apps">
-      <h3>> Frequent Websites</h3>
+      <!--<h3>> Frequent Websites</h3>-->
-      <div id="apps-container">
+      <div id="apps-loop">
         <a id="link" class="apps-item" href="https://facebook.com/">
           <div class="apps-icon">
             <span class="iconify icon" data-icon="mdi-facebook"></span>
@@ -38,7 +44,7 @@
             <span>facebook.com</span>
           </div>
         </a>
-		<a id="link" class="apps-item" href="https://www.instagram.com/">
+	<a id="link" class="apps-item" href="https://www.instagram.com/">
           <div class="apps-icon">
             <span class="iconify icon" data-icon="mdi-instagram"></span>
           </div>
@@ -140,14 +146,8 @@
       </div>
     </section>
     <section id="links">
-      <a id="togglebookmarks"><h3>> Bookmarks</h3></a>
+      <!--<h3>> Bookmarks</h3>-->
-      <div id="links-container">
+      <div id="links-loop">
-        <div class="links-item">
-          <h4>University</h4>
-          <a id="link" href="https://">Moodle</a>
-          <a id="link" href="https://">Timetable</a>
-          <a id="link" href="https://">Teams</a>
-        </div>
         <div class="links-item">
           <h4>Chitchat</h4>
           <a id="link" href="https://telegram.com/">Telegram</a>
@@ -166,40 +166,48 @@
           <a id="link" href="https://www.reddit.com/r/startpages">r/startpages</a>
           <a id="link" href="https://www.reddit.com/r/unixporn">r/unixporn</a>
         </div>
-        <div class="links-item">
-          <h4>Art</h4>
-          <a id="link" href="https://">DeviantArt</a>
-          <a id="link" href="https://">Artsy</a>
-          <a id="link" href="https://">Patreon</a>
-        </div>
-        <div class="links-item">
-          <h4>Finance</h4>
-          <a id="link" href="https://">Bank</a>
-          <a id="link" href="https://paypal.com/">PayPal</a>
-        </div>
-        <div class="links-item">
-          <h4>Web Hosting</h4>
-          <a id="link" href="https://">Website</a>
-          <a id="link" href="https://">VPS</a>
-          <a id="link" href="https://www.namecheap.com/">NameCheap</a>
-        </div>
         <div class="links-item">
           <h4>Other</h4>
           <a id="link" href="https://imgur.com/">Imgur</a>
           <a id="link" href="https://www.color-hex.com/">Color-Hex</a>
-          <a id="link" href="https://"></a>
-        </div>
-        <div id="hiddenbookmarks" style="display: none;">
-          <div class="links-item">
-            <h4>Forums</h4>
-            <a id="link" href="https://">AlternativeTo</a>
-            <a id="link" href="https://">Imdb</a>
-            <a id="link" href="https://linustechtips.com/main/">LTT</a>
-          </div>
         </div>
       </div>
     </section>
+    <section id="modal">
+      <div>
+        <header id="modal-header">
+          <h3>> Options</h3>
+          <a href="#" title="Close" class="modal-close">
+            <span class="iconify" data-icon="mdi-close"></span>
+          </a>
+        </header>
+        <!--<h4>Color themes</h4>
+        <div id="modal-theme">
+          <button data-theme="blackboard" class="theme-button theme-blackboard">Blackboard</button>
+          <button data-theme="hackers" class="theme-button theme-hackers">Hackers</button>
+          <button data-theme="nord" class="theme-button theme-nord">Nord</button>
+        </div>-->
+        <h4>Additional links and todo</h4>
+        <section id="providers">
+          <div class="modaloptions">
+            <a href="https://">Something</a>
+          </div>
+          <div class="modaloptions">
+            Made by: <a href="https://github.com/TB-96/">this guy</a><br>
+            Inspired by: <a href="https://github.com/jeroenpardon/">that dude</a><br>
+            Icons by: <a href="https://materialdesignicons.com/">those lads</a><br>
+            Todo: Weather, random link, tfw wanna add more JS crap but I wanna save my dignity
+          </div>
+          <div style="clear: both;"></div>
+        </section>
+      </div>
+    </section>
   </main>
+  <div id="modal_init">
+    <a class="btn" href="#modal">
+      <span class="iconify icon" data-icon="mdi-xbox-controller-menu"></span>
+    </a>
+  </div>
   <script src="./assets/js/script.js" type="text/javascript"></script>
 </body>
 </html>