<!doctype html>
<!--
 *
 * Evening Startpage
 * Inspired by https://github.com/jeroenpardon/sui
 * You can find it at https://github.com/TB-96/Evening-Startpage
 * Made by TB-96 2020
 *
-->
<html>
<head>
  <title>New Tab</title>
  <meta charset="utf-8"/>

  <link rel="shortcut icon" href="./assets/img/fav.png"/>
  <link type="text/css" rel="stylesheet" href="./assets/css/style.css" media="screen, projection"/>
  <script src="./assets/js/iconify.js" type="text/javascript"></script>
  <script src="./assets/js/jquery.js" type="text/javascript"></script>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
  <main id="container" class="fade">
    <section id="header">
      <h1 id="header-time">00:00</h1>
      <h2 id="header-date">Date</h2>
      <div id="header-quote">Thinking</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>-->
      <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>
          </div>
          <div class="apps-text">
            <span>Facebook</span>
            <span>facebook.com</span>
          </div>
        </a>
	<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>
          <div class="apps-text">
            <span>Instagram</span>
            <span>instagram.com</span>
          </div>
        </a>
        <a id="link" class="apps-item" href="https://twitter.com/">
          <div class="apps-icon">
            <span class="iconify icon" data-icon="mdi-twitter"></span>
          </div>
          <div class="apps-text">
            <span>Twitter</span>
            <span>twitter.com</span>
          </div>
        </a>
        <a id="link" class="apps-item" href="https://www.youtube.com/">
          <div class="apps-icon">
            <span class="iconify icon" data-icon="mdi-youtube"></span>
          </div>
          <div class="apps-text">
            <span>Youtube</span>
            <span>youtube.com</span>
          </div>
        </a>
        <a id="link" class="apps-item" href="https://www.twitch.tv/">
          <div class="apps-icon">
            <span class="iconify icon" data-icon="mdi-twitch"></span>
          </div>
          <div class="apps-text">
            <span>Twitch</span>
            <span>twitch.tv</span>
          </div>
        </a>
        <a id="link" class="apps-item" href="https://mail.google.com/mail/u/0/">
          <div class="apps-icon">
            <span class="iconify icon" data-icon="mdi-google"></span>
          </div>
          <div class="apps-text">
            <span>Gmail</span>
            <span>gmail.com</span>
          </div>
        </a>
        <a class="apps-item" onclick="location.href='https://discordapp.com/channels/@me';">
          <div class="apps-icon">
            <span class="iconify icon" data-icon="mdi-discord"></span>
          </div>
          <div class="apps-text">
            <span>Discord</span>
            <span>discordapp.com</span>
          </div>
        </a>
        <a id="link" class="apps-item" href="https://github.com/">
          <div class="apps-icon">
            <span class="iconify icon" data-icon="mdi-github"></span>
          </div>
          <div class="apps-text">
            <span>Github</span>
            <span>github.com</span>
          </div>
        </a>
        <a id="link" class="apps-item" href="https://www.spotify.com">
          <div class="apps-icon">
            <span class="iconify icon" data-icon="mdi-spotify"></span>
          </div>
          <div class="apps-text">
            <span>Spotify</span>
            <span>spotify.com</span>
          </div>
        </a>
        <a id="link" class="apps-item" href="https://protonmail.com/login">
          <div class="apps-icon">
            <span class="iconify icon" data-icon="mdi-at"></span>
          </div>
          <div class="apps-text">
            <span>Protonmail</span>
            <span>protonmail.com</span>
          </div>
        </a>
        <a id="link" class="apps-item" href="https://www.netflix.com/">
          <div class="apps-icon">
            <span class="iconify icon" data-icon="mdi-netflix"></span>
          </div>
          <div class="apps-text">
            <span>Netflix</span>
            <span>netflix.com</span>
          </div>
        </a>
        <a id="link" class="apps-item" href="https://stackoverflow.com/">
          <div class="apps-icon">
            <span class="iconify icon" data-icon="mdi-stackoverflow"></span>
          </div>
          <div class="apps-text">
            <span>overflow</span>
            <span>stackoverflow.com</span>
          </div>
        </a>
      </div>
    </section>
    <section id="links">
      <!--<h3>> Bookmarks</h3>-->
      <div id="links-loop">
        <div class="links-item">
          <h4>Chitchat</h4>
          <a id="link" href="https://telegram.com/">Telegram</a>
          <a id="link" href="https://www.whatsapp.com/">WhatsApp</a>
          <a id="link" href="https://www.messenger.com/">Messenger</a>
        </div>
        <div class="links-item">
          <h4>4chan</h4>
          <a id="link" href="https://boards.4channel.org/wsg/">/wsg/ - Worksafe GIF</a>
          <a id="link" href="https://boards.4channel.org/lit/">/lit/ - Literature</a>
          <a id="link" href="https://boards.4channel.org/g/">/g/ - Technology</a>
        </div>
        <div class="links-item">
          <h4>Reddit</h4>
		      <a id="link" href="https://www.reddit.com/r/wallpapers">r/wallpapers</a>
          <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>Other</h4>
          <a id="link" href="https://imgur.com/">Imgur</a>
          <a id="link" href="https://www.color-hex.com/">Color-Hex</a>
        </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>