index.html

<!doctype html>

<html>

<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Known Bugs
    Note: I wont support IE and Edge, Fixing bugs for FF is hard
          Way more bugs than listed here, most have been easy to fix so I didnt list them

  -Hover over stripe button removes input Text                                               /Fixed (dont call the Buttons Button)
  -Cant tab select                                                                           /Fixed (same)
  -Left or right clicking on suggestions moves them up                                       /Fixed
  -Hovering over a serach suggestion blures it                                               /somewhat Fixed
  -Calculator dosent work for + and - (I guss b/c of the datatype)                           /Fixed, rewrote it
  -Some Code might not be responsive to screens wich are not 1920x                           /Should be now (at least 1080p)
  -300 ms after opening a Stripe it will jump to the current mouse position                  /Fixed
  -clickable button area                                                                     /Fixed
  -Days might not align                                                                      /Fixed
  -no resett when removing the time                                                          /Fixed
  -Work() might will get called even though no data is available yet                         /Fixed
  -Rererefix Animation on Load                                                               /I still dont know the cause, but fixed !!!
  -Creating more than one remindme at a time dosent work as intended                         /maybe Fixed?
  -Firefox: Search Commands (aka calc password and number) dont work
  -Firefox: I am sure a lot more isnt working
  -Sometimes the full PW isnt displayed                                                      /Fixed
  -Tabing can open Notes (Nothing selected)
  -No Tab select indicator
  -Time for Weather is borken

  Features for the Future
  -Extend weatherwidget                                                                      /somewhat done, will add more in the future
  -Rain on Bg when it is raining                                                             (Would have to make an Api Call regardless of opening weatherwidget)
  -Better calculator                                                                         /somewhat done
  -Buttons on Strips werent planed but I kinda like them so they stay for now
  -analog clock option                                                                       /I dont like it
  (-"Falling Stars" only at night)
  (-some kind of Sun/Moon)
  -Reddit posts
  -Reddit messages
  -(G)Mail
  -remove need for jquery
  -Umbrella
  -World Clock
  -Timer                                                                                     /Added one, maybe change clock to countdown too
  -Easter Eggs, like https://codepen.io/ismanfromes/pen/gKBZrW
  -notes                                                                                     /Added
  -Notes Commands                                                                            /Not what I intended but somewhat done
  -Reminders                                                                                 /Added
-->

</head>

<body onLoad="LoadReminders()">
  <noscript>JavaScript is off. To use this startpage create an exception. We wont track you, the code is open source.</noscript>

  <div id="BackgroundM">
    <div class="Information">
      <h4 class="TimeOfWeather"></h4>
      <!-- To be added in the Future -->
    </div>
    <nav>
      <ul>
        <li>
          <div class="containIcons">
            <div data-element="icon_Obj0">
              <div data-element="a_Obj0">
                <div data-element="a_a_Obj0"></div>
              </div>
              <div data-element="b_Obj0">
                <div data-element="b_a_Obj0"></div>
                <div data-element="b_b_Obj0"></div>
              </div>
              <div data-element="c_Obj0"></div>
            </div>
            <div class="Text Obj0">Day2</div>
          </div>
        </li>
        <li>
          <div class="containIcons">
            <div data-element="icon_Obj1">
              <div data-element="a_Obj1">
                <div data-element="a_a_Obj1"></div>
              </div>
              <div data-element="b_Obj1">
                <div data-element="b_a_Obj1"></div>
                <div data-element="b_b_Obj1"></div>
              </div>
              <div data-element="c_Obj1"></div>
            </div>
            <div class="Text Obj1">Day2</div>
          </div>
        </li>
        <li>
          <div class="containIcons">
            <div data-element="icon_Obj2">
              <div data-element="a_Obj2">
                <div data-element="a_a_Obj2"></div>
              </div>
              <div data-element="b_Obj2">
                <div data-element="b_a_Obj2"></div>
                <div data-element="b_b_Obj2"></div>
              </div>
              <div data-element="c_Obj2"></div>
            </div>
            <div class="Text Obj2">Day2</div>
          </div>
        </li>
        <li>
          <div class="containIcons">
            <div data-element="icon_Obj3">
              <div data-element="a_Obj3">
                <div data-element="a_a_Obj3"></div>
              </div>
              <div data-element="b_Obj3">
                <div data-element="b_a_Obj3"></div>
                <div data-element="b_b_Obj3"></div>
              </div>
              <div data-element="c_Obj3"></div>
            </div>
            <div class="Text Obj3">Day2</div>
          </div>
        </li>
        <li>
          <div class="containIcons">
            <div data-element="icon_Obj4">
              <div data-element="a_Obj4">
                <div data-element="a_a_Obj4"></div>
              </div>
              <div data-element="b_Obj4">
                <div data-element="b_a_Obj4"></div>
                <div data-element="b_b_Obj4"></div>
              </div>
              <div data-element="c_Obj4"></div>
            </div>
            <div class="Text Obj4">Day2</div>
          </div>
        </li>
        <li>
          <div class="containIcons">
            <div data-element="icon_Obj5">
              <div data-element="a_Obj5">
                <div data-element="a_a_Obj5"></div>
              </div>
              <div data-element="b_Obj5">
                <div data-element="b_a_Obj5"></div>
                <div data-element="b_b_Obj5"></div>
              </div>
              <div data-element="c_Obj5"></div>
            </div>
            <div class="Text Obj5">Day2</div>
          </div>
        </li>
      </ul>
    </nav>
    <div id="Image" class="NoTransitions">
      <div id="StripesAndMoreWrapper">
        <div id="WeatherWrapper" class="back-row-toggle splat-toggle">
          <div class="rain front-row"></div>
          <div class="rain back-row"></div>
        </div>

        <div class="approx" onmouseover="SpeedEnter1()" onclick="SpeedEnter1()" onmouseout="SpeedLeave1()"></div>
        <div class="stripe" id="SpeedId1" style="background-color:#223349">
          <a href="http://www.reddit.com/r/all">
            <div class="title">
              <span>Reddit</span>
            </div>
          </a>
          <div class="content">
            <span class="itemStripes buttonS">
              <a href="http://www.reddit.com/r/jokes">/r/Jokes</a>
            </span>
            <span class="itemStripes buttonS">
              <a href="http://www.reddit.com/r/startpages">/r/Startpages</a>
            </span>
            <span class="itemStripes buttonS">
              <a href="http://www.reddit.com/r/linux">/r/Linux</a>
            </span>
            <span class="itemStripes buttonS">
              <a href="http://www.reddit.com/r/unixporn">/r/unixporn</a>
            </span>
          </div>
        </div>
        <div class="approx" onmouseover="SpeedEnter2()" onclick="SpeedEnter2()" onmouseout="SpeedLeave2()"></div>
        <div class="stripe" id="SpeedId2" style="background-color:#1A2832">
          <a href="http://www.youtube.com">
            <div class="title">
              <span>Youtube</span>
            </div>
          </a>
          <div class="content">
            <span class="itemStripes buttonS">
              <a href="https://www.youtube.com/user/Vsauce">Vsauce</a>
            </span>
          </div>
        </div>
        <div class="approx" onmouseover="SpeedEnter3()" onclick="SpeedEnter3()" onmouseout="SpeedLeave3()"></div>
        <div class="stripe" id="SpeedId3" style="background-color:#1C323B">
          <div class="title">
            <span>Games</span>
          </div>
          <div class="content">
            <span class="itemStripes buttonS">
              <a href="https://eu.battle.net/forums/de/overwatch/19369416/">OverwatchDe</a>
            </span>
            <span class="itemStripes buttonS">
              <a href="https://eu.battle.net/forums/en/overwatch/19369422/">OverwatchEn</a>
            </span>
          </div>
        </div>
        <div class="approx" onmouseover="SpeedEnter4()" onclick="SpeedEnter4()" onmouseout="SpeedLeave4()"></div>
        <div class="stripe" id="SpeedId4" style="background-color:#1D3F43">
          <div class="title">
            <span>Other</span>
          </div>
          <div class="content">
            <span class="itemStripes buttonS">
              <a href="https://mail.yahoo.com/d/folders/1/messages/ACSuMw8TsNQVWvBeBQq-ADlhXHM?reason=invalid_cred">Yahoo</a>
            </span>
            <span class="itemStripes buttonS">
              <a href="https://mail.protonmail.com/inbox">Protonmail</a>
            </span>
            <span class="itemStripes buttonS">
              <a href="http://www.Codepen.io">Codepen.io</a>
            </span>
            <span class="itemStripes buttonS">
              <a href="https://www.w3schools.com">W3Schools</a>
            </span>
          </div>
        </div>


        <div class="center">
          <time id="clock"></time>
        </div>

        <form class="overlay center" id="search-form" autocomplete="off" spellcheck="false">
          <div class="divInput">
            <div id="WrapperForInput">
              <p Id="OutputIDBefore">&nbsp;</p>
              <input id="search-input" type="text" oninput="InputDo()" onblur="InputBlur()">
              <p Id="OutputID">&nbsp;</p>
            </div>
            <ul id="search-suggestions"></ul>
          </div>
        </form>

        <aside class="overlay center" id="help"></aside>
      </div>
      <div class="MenuMoveIn" id="wrapperWrapper">
        <div class="Wrapper">
          <nav>
            <ul>
              <li class="active" id="tab1" onclick="DefinVariables(1)">
                <div>First</div>
              </li>
              <li id="tab2" onclick="DefinVariables(2)">
                <div>Second</div>
              </li>
              <li id="tab3" onclick="DefinVariables(3)">
                <div>Third</div>
              </li>
            </ul>
            <div id="lineId" class="line"></div>
          </nav>
          <textarea id="idTextarea" cols="30" rows="10" placeholder="Add your notes here..." onfocus="NoteFocus()" onblur="writeNote(1)"></textarea>
        </div>
      </div>
      <div id="NotesMenuTrigger" onmouseover="ToggleMenu()"></div>
    </div>
  </div>

</body>

</html>

<style>
  noscript {
    position: fixed;
    z-index: 10;
    text-align: center;
    width: 100vw;
    pointer-events: none;
    margin-top: 0.5em;
  }

  #BackgroundM {
    background-color: #17191d;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
  }

  .stripe {
    transition: width 125ms ease-in-out;
  }

  .stripe:hover {
    width: 100%;
    transition: width 400ms ease !important;
  }

  .approx {
    position: fixed;
    background-color: red;
    width: 20vw;
    height: 100%;
    z-index: 0;
    height: 25vh;
    opacity: 0;
    margin-left: 40px;
    z-index: 3;
  }

  .approx:hover {
    background-color: green !important;
  }

  /* old Code
.approx:hover + .stripe {
 width: 70px;
}
*/

  .approx:hover+.stripe {
    width: calc(0.0015 / var(--mouse-x, 0) * 100vw + 26.5px);
    /*Code not responsive (only 1920x)*/
  }

  .Fast {
    transition: width 0s !important;
  }
</style>

<script>
  /* Todo: It should be possible to do this in one, not for every part indiviually*/
  const root = document.documentElement;
  var goVar;

  document.addEventListener('mousemove', evt => {
    let x = evt.clientX / innerWidth;

    root.style.setProperty('--mouse-x', x);
  });

  function SpeedEnter1() {
    goVar = setTimeout(function () {
      document.getElementById("SpeedId1").classList.add('Fast');
    }, 200);
  }

  function SpeedLeave1() {
    document.getElementById("SpeedId1").classList.remove('Fast');
    clearTimeout(goVar);
  }

  function SpeedEnter2() {
    goVar = setTimeout(function () {
      document.getElementById("SpeedId2").classList.add('Fast');
    }, 200);
  }

  function SpeedLeave2() {
    document.getElementById("SpeedId2").classList.remove('Fast');
    clearTimeout(goVar);
  }

  function SpeedEnter3() {
    goVar = setTimeout(function () {
      document.getElementById("SpeedId3").classList.add('Fast');
    }, 200);
  }

  function SpeedLeave3() {
    document.getElementById("SpeedId3").classList.remove('Fast');
    clearTimeout(goVar);
  }

  function SpeedEnter4() {
    goVar = setTimeout(function () {
      document.getElementById("SpeedId4").classList.add('Fast');
    }, 200);
  }

  function SpeedLeave4() {
    document.getElementById("SpeedId4").classList.remove('Fast');
    clearTimeout(goVar);
  }
</script>

<script>
  var makeItRain = function () {
    //clear out everything
    $('.rain').empty();

    var increment = 0;
    var drops = "";
    var backDrops = "";

    while (increment < 100) {
      //couple random numbers to use for various randomizations
      //random number between 98 and 1
      var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
      //random number between 5 and 2
      var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
      //increment
      increment += randoFiver;
      //add in a new raindrop with various randomizations to certain CSS properties
      drops += '<div class="drop" style="left: ' + increment +
        '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) +
        '%; animation-delay: 0.' + randoHundo +
        's; animation-duration: 0.5' + randoHundo +
        's;"><div class="stem" style="animation-delay: 0.' + randoHundo +

        's; animation-duration: 0.5' + randoHundo +
        's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo +
        's; animation-duration: 0.5' + randoHundo +
        's;"></div></div>';
      backDrops += '<div class="drop" style="right: ' + increment +
        '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) +
        '%; animation-delay: 0.' + randoHundo +
        's; animation-duration: 0.5' + randoHundo +
        's;"><div class="stem" style="animation-delay: 0.' + randoHundo +
        's; animation-duration: 0.5' + randoHundo +
        's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo +
        's; animation-duration: 0.5' + randoHundo +
        's;"></div></div>';
    }

    $('.rain.front-row').append(drops);
    $('.rain.back-row').append(backDrops);
  }

  makeItRain();

  /* Credit for Code https://codepen.io/arickle/pen/XKjMZY - Also for CSS and Html */
</script>

<script>
  //Tabs
  /* Old Code
      $(".stripe").mouseenter(function() {
          $(this).stop().animate({
              width: '100vw'
          });
          $(this).find(".content").stop().fadeIn().children().show();
      });

      $(".stripe").mouseleave(function() {
          $(this).stop().animate({
              width: '40px'
          });
          $(this).find(".content").stop().fadeOut();
      });
  */
  const CONFIG = {
    // the category, name, key, url, search path and color for your commands
    // if none of the specified keys are matched, the '*' key is used
    commands: [
      [null, 'Google', '*', 'https://encrypted.google.com', '/search?q={}', '#10161f'],
      ['Work', 'GitHub', 'g', 'https://github.com', '/search?q={}', '#333'],
      ['Work', 'Inbox', 'I', 'https://inbox.google.com', '/search/{}', '#4285f4'],
      ['Work', 'Keep', 'k', 'https://keep.google.com', '/#search/text={}', '#fb0'],
      ['Look', 'Codrops', 'C', 'https://tympanus.net/codrops', '?search-type=posts&s={}', '#0099cc'],
      ['Look', 'Photos', 'F', 'https://photos.google.com', '/search/{}', '#34a853'],
      ['Lurk', 'Reddit', 'r', 'https://www.reddit.com', '/search?q={}', '#223349'],
      ['Listen', 'Line Radio', 'l', 'https://linerad.io', '/#{}', '#39CCCC'],
      ['Watch', 'Academy', 'A', 'https://www.khanacademy.org/', '/search?page_search_query={}', '#9cb443'],
      ['Watch', 'YouTube', 'y', 'https://youtube.com/feed/subscriptions', '/results?search_query={}', '#1A2832'],
      ['Work', 'Protonmail', 'p', 'https://mail.protonmail.com/login', '', '#2f2f2f'],
      ['Work', 'Yahoo', 'mail', 'https://mg.mail.yahoo.com/neo/launch#3972164707', '', '#2f2f2f'],
    ],

    // give suggestions as you type
    suggestions: true,

    // max amount of suggestions that will ever be displayed
    suggestionsLimit: 5,

    // the order and limit for each suggestion influencer
    // "Default" suggestions come from CONFIG.defaultSuggestions
    // "DuckDuckGo" suggestions come from the duck duck go search api
    // "History" suggestions come from your previously entered queries
    influencers: [{
        name: 'Default',
        limit: 5
      },
      {
        name: 'History',
        limit: 1
      },
      {
        name: 'DuckDuckGo',
        limit: 5
      },
    ],

    // default search suggestions for the specified queries
    defaultSuggestions: {
      'g': ['g/issues', 'g/pulls', 'gist.github.com'],
      'r': ['r/r/piracy', 'r/r/startpages'],
    },

    // instantly redirect when a key is matched
    // put a space before any other queries to prevent unwanted redirects
    instantRedirect: false,

    // open queries in a new tab
    newTab: false,

    // dynamic background colors when command domains are matched
    colors: true,

    // the delimiter between the key and your search query
    // e.g. to search GitHub for potatoes you'd type "g:potatoes"
    searchDelimiter: ' ',

    // the delimiter between the key and a path
    // e.g. type "r/r/unixporn" to go to "reddit.com/r/unixporn"
    pathDelimiter: '/',

    // the delimiter between the hours and minutes in the clock
    clockDelimiter: ':',

    // note: you can pass in your search query via the q query param
    // e.g. going to file:///path/to/tilde/index.html?q=hamsters is equivalent
    // to typing "hamsters" and pressing enter
  };
</script>

<meta charset="utf-8">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">

<title>~</title>

<style type="text/css">
  .NoTransitions {
    /*causes bug*/
    -webkit-transition: all 0s !important;
    -moz-transition: all 0s !important;
    -ms-transition: all 0s !important;
    -o-transition: all 0s !important;
    transition: all 0s !important;
    transition-delay: 0s !important;
    -webkit-transition-delay: 0s !important;
    -moz-transition-delay: 0s !important;
    -ms-transition-delay: 0s !important;
    -o-transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }

  /*WorkingOn*/

  #WrapperForInput {
    display: flex;
    justify-content: center;
  }

  #OutputIDBefore {
    background-color: transparent;
    margin-top: 0;
    flex: auto;
    margin-bottom: 20px;
    font-size: 3em;
    font-weight: 500;
    letter-spacing: .05em;
    z-index: 1;
    visibility: hidden;
    pointer-events: none;
    font-family: 'Indie Flower', cursive;
  }

  #OutputID {
    background-color: transparent;
    text-align: left;
    margin-top: 0;
    flex: auto;
    margin-bottom: 20px;
    font-size: 3em;
    font-weight: 500;
    letter-spacing: .05em;
    z-index: 1;
    color: #FF7620;
    font-family: 'Indie Flower', cursive;

  }

  ::-webkit-scrollbar {
    width: 0px;
    /* remove scrollbar space */
  }

  body {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transition: background .2s;
    color: #fff;
  }

  input,
  input:focus {
    display: block;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
  }


  ul#search-suggestions,
  ul#search-suggestions>li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a,
  a:focus {
    color: inherit;
    outline: 0;
  }

  #clock {
    z-index: 2;
    display: block;
    margin-top: -.06em;
    font-size: 7rem;
    letter-spacing: .05em;
    cursor: pointer;
    color: #4B5A73;
    font-family: 'Indie Flower', cursive;
    /* Todo: Font for Clock */
  }

  .OrangeClock {
    color: #FF7620 !important;
  }

  #search-form {
    padding: 1em;
    box-sizing: border-box;
    z-index: 2;
    position: absolute;
    width: 100%;
  }

  #search-form>div {
    width: 100%;
  }

  /*WorkingOn*/

  #search-input,
  #search-input:focus {
    flex: auto;
    margin-bottom: 20px;
    font-size: 1.5em;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: capitalize;
    font-family: 'Indie Flower', cursive;
    z-index: 2;
  }

  #search-suggestions {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
  }

  body.suggestions #search-suggestions {
    display: flex;
  }

  .search-suggestion {
    padding: .7em 1em;
    white-space: nowrap;
    font-size: 1.1em;
    cursor: pointer;
  }

  /* .search-suggestion.highlight {
    //come back
  } */

  .search-suggestion b {
    position: relative;
    font-weight: 400;
  }

  .search-suggestion b::after {
    content: ' ';
    position: absolute;
    top: 51%;
    right: 0;
    left: 0;
    height: 3px;
    background-color: #fff;
    opacity: .8;
  }

  .search-suggestion.highlight b::after {
    opacity: 0;
  }

  #help {
    display: block;
    padding: 8vw;
    background-image: url("starryNightFull.gif");
    background-size: cover;
    font-size: 1.3rem;
    z-index: 1;
  }

  .category {
    margin-bottom: 2rem;
    color: #853E1A;
  }

  .category:last-of-type {
    margin-bottom: 0;
  }

  .category-name {
    margin: 0 0 2rem;
    font-size: .7em;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  .command a {
    display: block;
    position: relative;
    margin: 1em 0;
    font-size: .9em;
    line-height: 2em;
    text-decoration: none;
  }

  .command:last-of-type a {
    margin-bottom: 0;
  }

  /*help Circles*/

  .command-key {
    display: block;
    float: left;
    width: 2.5em;
    margin-right: 1em;
    border-radius: 50%;
    background-color: #FF7620;
    color: #fff;
    font-size: .8em;
    text-align: center;
  }

  .command-name {
    position: relative;
  }

  .command-name::after {
    content: ' ';
    position: absolute;
    right: 0;
    bottom: -.35em;
    left: 0;
    height: 2px;
    transition: .2s;
    transform: translateX(-2em);
    background-color: #ff0000;
    opacity: 0;
  }

  .command a:hover .command-name::after,
  .command a:focus .command-name::after {
    transform: translateX(0);
    opacity: 1;
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
  }

  body.help #help.overlay,
  body.form #search-form.overlay {
    visibility: visible;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: inherit;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
  }

  @media (min-width: 500px) {
    .categories {
      display: grid;
      grid-template-columns: 250px 185px;
      justify-content: space-around;
    }

    .category:nth-last-child(2) {
      margin-bottom: 0;
    }

    #search-input,
    #search-input:focus {
      font-size: 3em;
    }
  }

  @media (min-width: 1000px) {
    #help {
      display: flex;
      padding: 0;
    }

    .category {
      margin: 2rem 0;
    }

    .categories {
      grid-template-columns: repeat(2, 300px) 185px;
    }
  }

  @media (min-width: 1700px) {
    .categories {
      grid-template-columns: repeat(5, 250px) 185px;
    }
  }
</style>



<script>
  const _ = {
    bodyClassAdd: c => _.el('body').classList.add(c),
    bodyClassHas: c => _.el('body').classList.contains(c),
    bodyClassRemove: c => _.el('body').classList.remove(c),
    el: s => document.querySelector(s),
    els: s => [].slice.call(document.querySelectorAll(s) || []),
    escapeRegex: s => s.replace(/[-\/\\^_*+?.()|[\]{}]/g, '\\_&'),
    ieq: (a, b) => a.toLowerCase() === b.toLowerCase(),
    iin: (a, b) => a.toLowerCase().indexOf(b.toLowerCase()) !== -1,
    isDown: e => ['c-n', 'down', 'tab'].includes(_.key(e)),
    isRemove: e => ['backspace', 'delete'].includes(_.key(e)),
    isUp: e => ['c-p', 'up', 's-tab'].includes(_.key(e)),

    jsonp: url => {
      let script = document.createElement('script');
      script.src = url;
      _.el('head').appendChild(script);
    },

    key: e => {
      const ctrl = e.ctrlKey;
      const shift = e.shiftKey; //has This Button been pressed
      
      //Jump
      switch (e.which) {
        case 8:
          return 'backspace';
        case 9:
          return shift ? 's-tab' : 'tab';
        case 13:
          return 'enter';
        case 16:
          return 'shift';
        case 17:
          return 'ctrl';
        case 18:
          return 'alt';
        case 27:
          return 'escape';
        case 38:
          return 'up';
        case 40:
          return 'down';
        case 46:
          return 'delete';
        case 78:
          return ctrl ? 'c-n' : 'n';
        case 80:
          return ctrl ? 'c-p' : 'n';
        case 91:
          return 'super';
      }
    },
  };
  

  class Clock {
    constructor(options) {
      this._el = _.el('#clock');
      this._delimiter = options.delimiter;
      this._form = options.form;
      this._setTime = this._setTime.bind(this);
      this._registerEvents();
      this._start();
    }

    _pad(num) {
      return ('0' + num.toString()).slice(-2);
    }

    _registerEvents() {
      this._el.addEventListener('click', this._form.show);
    }

    _setTime() {
      const date = new Date();
      const hours = this._pad(date.getHours());
      const minutes = this._pad(date.getMinutes());
      this._el.innerHTML = hours + this._delimiter + minutes;
    }

    _start() {
      this._setTime();
      setInterval(this._setTime, 1000);
    }
  }

  class Help {
    constructor(options) {
      this._el = _.el('#help');
      this._commands = options.commands;
      this._newTab = options.newTab;
      this._toggled = false;
      this._buildAndAppendLists();
      this._bindMethods();
      this._registerEvents();
    }

    toggle(show) {
      this._toggled = (typeof show !== 'undefined') ? show : !this._toggled;
      this._toggled ? _.bodyClassAdd('help') : _.bodyClassRemove('help');
    }

    _bindMethods() {
      this._handleKeydown = this._handleKeydown.bind(this);
    }

    _buildAndAppendLists() {
      const lists = document.createElement('ul');
      lists.classList.add('categories');

      this._getCategories().forEach(category => {
        lists.insertAdjacentHTML(
          'beforeend',
          `<li class="category">
            <h2 class="category-name">${category}</h2>
            <ul>${this._buildListCommands(category)}</ul>
          </li>`
        );
      });

      this._el.appendChild(lists);
    }

    _buildListCommands(category) {
      return this._commands.map(([cmdCategory, name, key, url]) => {
        if (cmdCategory === category) {
          return (
            `<li class="command">
              <a href="${url}" target="${this._newTab ? '_blank' : '_self'}">
                <span class="command-key">${key}</span>
                <span class="command-name">${name}</span>
              </a>
            </li>`
          );
        }
      }).join('');
    }

    _getCategories() {
      const categories = this._commands
        .map(([category]) => category)
        .filter(category => category);

      return [...new Set(categories)];
    }

    _handleKeydown(e) {
      if (_.key(e) === 'escape') this.toggle(false);
    }

    _registerEvents() {
      document.addEventListener('keydown', this._handleKeydown);
    }
  }

  class Influencer {
    constructor(options) {
      this._limit = options.limit;
      this._queryParser = options.queryParser;
    }

    addItem() {}
    getSuggestions() {}

    _addSearchPrefix(items, query) {
      const searchPrefix = this._getSearchPrefix(query)
      return items.map(s => searchPrefix ? searchPrefix + s : s);
    }

    _getSearchPrefix(query) {
      const {
        isSearch,
        key,
        split
      } = this._parseQuery(query);
      return isSearch ? `${key}${split} ` : false;
    }

    _parseQuery(query) {
      return this._queryParser.parse(query);
    }
  }

  class DefaultInfluencer extends Influencer {
    constructor({
      defaultSuggestions
    }) {
      super(...arguments);
      this._defaultSuggestions = defaultSuggestions;
    }

    getSuggestions(query) {
      return new Promise(resolve => {
        const suggestions = this._defaultSuggestions[query];
        resolve(suggestions ? suggestions.slice(0, this._limit) : []);
      });
    }
  }

  class DuckDuckGoInfluencer extends Influencer {
    constructor({
      queryParser
    }) {
      super(...arguments);
    }

    getSuggestions(rawQuery) {
      const {
        query
      } = this._parseQuery(rawQuery);
      if (!query) return Promise.resolve([]);

      return new Promise(resolve => {
        const endpoint = 'https://duckduckgo.com/ac/';
        const callback = 'autocompleteCallback';

        window[callback] = res => {
          const suggestions = res.map(i => i.phrase)
            .filter(s => !_.ieq(s, query))
            .slice(0, this._limit)

          resolve(this._addSearchPrefix(suggestions, rawQuery));
        };

        _.jsonp(`${endpoint}?callback=${callback}&q=${query}`);
      });
    }
  }

  class HistoryInfluencer extends Influencer {
    constructor() {
      super(...arguments);
      this._storeName = 'history';
    }

    addItem(query) {
      if (query.length < 2) return;
      let exists;

      const history = this._getHistory().map(([item, count]) => {
        const match = _.ieq(item, query);
        if (match) exists = true;
        return [item, match ? count + 1 : count];
      });

      if (!exists) history.push([query, 1]);
      this._setHistory(this._sort(history));
    }

    getSuggestions(query) {
      return new Promise(resolve => {
        const suggestions = this._getHistory()
          .map(([item]) => item)
          .filter(item => this._itemContainsQuery(query, item))
          .slice(0, this._limit);

        resolve(suggestions);
      });
    }

    _fetch() {
      return JSON.parse(localStorage.getItem(this._storeName)) || [];
    }

    _getHistory() {
      this._history = this._history || this._fetch();
      return this._history;
    }

    _itemContainsQuery(query, item) {
      return query && !_.ieq(item, query) && _.iin(item, query);
    }

    _save(history) {
      localStorage.setItem(this._storeName, JSON.stringify(history));
    }

    _setHistory(history) {
      this._history = history;
      this._save(history);
    }

    _sort(history) {
      return history.sort((current, next) => current[1] - next[1]).reverse();
    }
  }

  class Suggester {
    constructor(options) {
      this._el = _.el('#search-suggestions');
      this._influencers = options.influencers;
      this._limit = options.limit;
      this._suggestionEls = [];
      this._bindMethods();
      this._registerEvents();
    }

    setOnClick(callback) {
      this._onClick = callback;
    }

    setOnHighlight(callback) {
      this._onHighlight = callback;
    }

    setOnUnhighlight(callback) {
      this._onUnhighlight = callback;
    }

    success(query) {
      this._clearSuggestions();
      this._influencers.forEach(i => i.addItem(query));
    }

    suggest(input) {
      input = input.trim();
      if (input === '') this._clearSuggestions();

      Promise.all(this._getInfluencerPromises(input)).then(res => {
        const suggestions = this._flattenAndUnique(res);
        this._clearSuggestions();

        if (suggestions.length) {
          this._appendSuggestions(suggestions, input);
          this._registerSuggestionEvents();
          _.bodyClassAdd('suggestions');
        }
      });
    }

    _appendSuggestions(suggestions, input) {
      suggestions.some((suggestion, i) => {
        const match = new RegExp(_.escapeRegex(input), 'ig');
        const suggestionHtml = suggestion.replace(match, `<u id="written">${input}</u>`);

        this._el.insertAdjacentHTML(
          'beforeend',
          `<li>
            <button
              type="button"
              class="button button button button Lined Thick search-suggestion"
              data-suggestion="${suggestion}"
              tabindex="-1"
            >
              ${suggestionHtml}
            </button>
          </li>`
        );

        return i + 1 >= this._limit;
      });

      this._suggestionEls = _.els('.button');
    }

    _bindMethods() {
      this._handleKeydown = this._handleKeydown.bind(this);
    }

    _clearClickEvents() {
      this._suggestionEls.forEach(el => {
        const callback = this._onClick.bind(null, el.value);
        el.removeEventListener('click', callback);
      });
    }

    _clearSuggestions() {
      _.bodyClassRemove('suggestions');
      this._clearClickEvents();
      this._suggestionEls = [];
      this._el.innerHTML = '';
    }

    // [[1, 2], [1, 2, 3, 4]] -> [1, 2, 3, 4]
    _flattenAndUnique(array) {
      return [...new Set([].concat.apply([], array))];
    }

    _focusNext(e) {
      const exists = this._suggestionEls.some((el, i) => {
        if (el.classList.contains('highlight')) {
          this._highlight(this._suggestionEls[i + 1], e);
          return true;
        }
      });

      if (!exists) this._highlight(this._suggestionEls[0], e);
    }

    _focusPrevious(e) {
      const exists = this._suggestionEls.some((el, i) => {
        if (el.classList.contains('highlight') && i) {
          this._highlight(this._suggestionEls[i - 1], e);
          return true;
        }
      });

      if (!exists) this._unHighlight(e);
    }

    _getInfluencerPromises(input) {
      return this._influencers
        .map(influencer => influencer.getSuggestions(input));
    }

    _handleKeydown(e) {
      if (_.isDown(e)) this._focusNext(e);
      if (_.isUp(e)) this._focusPrevious(e);
    }

    _highlight(el, e) {
      this._unHighlight();

      if (el) {
        this._onHighlight(el.getAttribute('data-suggestion'));
        el.classList.add('highlight');
        e.preventDefault();
      }
    }

    _registerEvents() {
      document.addEventListener('keydown', this._handleKeydown);
    }

    _registerSuggestionEvents() {
      this._suggestionEls.forEach(el => {
        const value = el.getAttribute('data-suggestion');
        el.addEventListener('mouseover', this._highlight.bind(this, el));
        el.addEventListener('mouseout', this._unHighlight.bind(this));
        el.addEventListener('click', this._onClick.bind(null, value));
      });
    }

    _unHighlight(e) {
      const el = _.el('.highlight');

      if (el) {
        this._onUnhighlight();
        el.classList.remove('highlight');
        if (e) e.preventDefault();
      }
    }
  }

  class QueryParser {
    constructor(options) {
      this._commands = options.commands;
      this._searchDelimiter = options.searchDelimiter;
      this._pathDelimiter = options.pathDelimiter;
      this._protocolRegex = /^[a-zA-Z]+:\/\//i;
      this._urlRegex = /^((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)_/i;
    }

    parse(query) {
      const res = {
        query: query,
        split: null
      };

      if (query.match(this._urlRegex)) {
        const hasProtocol = query.match(this._protocolRegex);
        res.redirect = hasProtocol ? query : 'http://' + query;
      } else {
        const splitSearch = query.split(this._searchDelimiter);
        const splitPath = query.split(this._pathDelimiter);

        this._commands.some(([category, name, key, url, searchPath]) => {
          res.isKey = query === key;
          res.isSearch = !res.isKey && splitSearch[0] === key;
          res.isPath = !res.isKey && splitPath[0] === key;

          if (res.isKey || res.isSearch || res.isPath) {
            res.key = key;

            if (res.isSearch && searchPath) {
              res.split = this._searchDelimiter;
              res.query = this._shiftAndTrim(splitSearch, res.split);
              res.redirect = this._prepSearch(url, searchPath, res.query);
            } else if (res.isPath) {
              res.split = this._pathDelimiter;
              res.path = this._shiftAndTrim(splitPath, res.split);
              res.redirect = this._prepPath(url, res.path);
            } else {
              res.redirect = url;
            }

            return true;
          }

          if (key === '*') {
            res.redirect = this._prepSearch(url, searchPath, query);
          }
        });
      }

      res.color = this._getColorFromUrl(res.redirect);
      return res;
    }

    _getColorFromUrl(url) {
      const domain = this._getHostname(url);
      const color = this._commands
        .filter(c => this._getHostname(c[3]) === domain)
        .map(c => c[5])[0];

      return color || null;
    }

    _getHostname(url) {
      const parser = document.createElement('a');
      parser.href = url;
      return parser.hostname.replace(/^www./, '');
    }

    _prepPath(url, path) {
      return this._stripUrlPath(url) + '/' + path;
    }

    _prepSearch(url, searchPath, query) {
      if (!searchPath) return url;
      const baseUrl = this._stripUrlPath(url);
      const urlQuery = encodeURIComponent(query);
      searchPath = searchPath.replace('{}', urlQuery);
      return baseUrl + searchPath;
    }

    _shiftAndTrim(arr, delimiter) {
      arr.shift();
      return arr.join(delimiter).trim();
    }

    _stripUrlPath(url) {
      const parser = document.createElement('a');
      parser.href = url;
      return `${parser.protocol}//${parser.hostname}`;
    }
  }

  class Form {
    constructor(options) {
      this._formEl = _.el('#search-form');
      this._inputEl = _.el('#search-input');
      this._colors = options.colors;
      this._help = options.help;
      this._suggester = options.suggester;
      this._queryParser = options.queryParser;
      this._instantRedirect = options.instantRedirect;
      this._newTab = options.newTab;
      this._inputElVal = '';
      this._bindMethods();
      this._registerEvents();
      this._loadQueryParam();
    }

    hide() {
      _.bodyClassRemove('form')
      this._inputEl.value = '';
      this._inputElVal = '';
    }

    show() {
      _.bodyClassAdd('form');
      this._inputEl.focus();
      console.log("show")
    }

    _bindMethods() {
      this.hide = this.hide.bind(this);
      this.show = this.show.bind(this);
      this._clearPreview = this._clearPreview.bind(this);
      this._handleKeydown = this._handleKeydown.bind(this);
      this._handleInput = this._handleInput.bind(this);
      this._previewValue = this._previewValue.bind(this);
      this._submitForm = this._submitForm.bind(this);
      this._submitWithValue = this._submitWithValue.bind(this);
    }

    _clearPreview() {
      this._previewValue(this._inputElVal);
      this._inputEl.focus();
    }

    _handleKeydown(e) {
      if (_.isUp(e) || _.isDown(e) || _.isRemove(e) || NoteHasFocus || _.key(e) == "tab") return;
      //Jump
      
      console.log("switch is done", _.key(e), _.key(e) == "tab");
      switch (_.key(e)) {
        case 'alt':
        case 'ctrl':
        case 'enter':
        case 'shift':
        case 'super':
          return;
        case 'escape':
          this.hide();
          return;
      }

      this.show();
    }

    _handleInput() {
      const newQuery = this._inputEl.value;
      const isHelp = newQuery === '?';
      const {
        isKey
      } = this._queryParser.parse(newQuery);
      this._inputElVal = newQuery;
      this._setBackgroundFromQuery(newQuery);
      if (!newQuery || isHelp) this.hide();
      if (isHelp) this._help.toggle();
      if (this._instantRedirect && isKey) this._submitWithValue(newQuery);
      if (this._suggester) this._suggester.suggest(newQuery);
    }

    _loadQueryParam() {
      const q = new URLSearchParams(window.location.search).get('q');
      if (q) this._submitWithValue(q);
    }

    _previewValue(value) {
      this._inputEl.value = value;
      this._setBackgroundFromQuery(value);
    }

    _redirect(redirect) {
      if (this._newTab) window.open(redirect, '_blank');
      else window.location.href = redirect;
    }

    _registerEvents() {
      document.addEventListener('keydown', this._handleKeydown);
      this._inputEl.addEventListener('input', this._handleInput);
      this._formEl.addEventListener('submit', this._submitForm, false);

      if (this._suggester) {
        this._suggester.setOnClick(this._submitWithValue);
        this._suggester.setOnHighlight(this._previewValue);
        this._suggester.setOnUnhighlight(this._clearPreview);
      }
    }

    _setBackgroundFromQuery(query) {
      if (!this._colors) return;
      const {
        color
      } = this._queryParser.parse(query);
      this._formEl.style.backgroundColor = color;
    }

    _submitForm(e) { //Search Enter Maybe
      if (e) e.preventDefault();
      const query = this._inputEl.value;
      if (this._suggester) this._suggester.success(query);
      this.hide();
      this._redirect(this._queryParser.parse(query).redirect);
    }

    _submitWithValue(value) {
      this._inputEl.value = value;
      this._submitForm();
    }
  }
</script>

<script>
  const getHelp = () => {
    return new Help({
      commands: CONFIG.commands,
      newTab: CONFIG.newTab,
    });
  };

  const getInfluencers = () => {
    const availableInfluencers = {
      Default: DefaultInfluencer,
      DuckDuckGo: DuckDuckGoInfluencer,
      History: HistoryInfluencer,
    };

    return CONFIG.influencers.map(i => {
      return new availableInfluencers[i.name]({
        limit: i.limit,
        queryParser: getQueryParser(),
        defaultSuggestions: CONFIG.defaultSuggestions,
      });
    });
  };

  const getSuggester = () => {
    return new Suggester({
      influencers: getInfluencers(),
      limit: CONFIG.suggestionsLimit,
    });
  };

  const getQueryParser = () => {
    return new QueryParser({
      commands: CONFIG.commands,
      pathDelimiter: CONFIG.pathDelimiter,
      searchDelimiter: CONFIG.searchDelimiter,
    });
  };

  const getForm = () => {
    return new Form({
      colors: CONFIG.colors,
      help: getHelp(),
      instantRedirect: CONFIG.instantRedirect,
      newTab: CONFIG.newTab,
      queryParser: getQueryParser(),
      suggester: CONFIG.suggestions ? getSuggester() : false,
    });
  };

  new Clock({
    delimiter: CONFIG.clockDelimiter,
    form: getForm(),
  });
</script>


<script>
  function InputBlur() {
    UserInputA = document.getElementById("search-input").value;
    if (UserInputA.length == 0) {
      document.getElementById("OutputID").style.visibility = "hidden";
    }
  }

  var Password = "";
  var GenNumber = "";
  var TimesWrong = 0;

  function InputDo() {
    UserInputA = document.getElementById("search-input").value;
    if (UserInputA.length != 0) {
      if (/(( ?[0-9]+ ?)[\*\-\/\+\=\%\^])+( ?[0-9]+ ?)/.test(UserInputA)) {
        TimesWrong = 0;
        CalculatedNumber = eval(UserInputA.replace(UserInputA.replace(/(( ?[0-9]+ ?)[\*\-\/\+\=\%\^])+( ?[0-9]+ ?)/, ""),
          ""))
        if (CalculatedNumber % 1 != 0) {
          CalculatedNumber = CalculatedNumber.toFixed(2)
        }

        if (/(( ?[0-9]+ ?)[\*\-\/\+\=\%\^])+( ?[0-9]+ ?)>c/g.test(UserInputA)) {

        }

        if (/(( ?[0-9]+ ?)[\*\-\/\+\=\%\^])+( ?[0-9]+ ?)>[1-3]/g.test(UserInputA)) {
          NoteNr = UserInputA.match(/ ?[0-9]+ ?[\*\-\/\+\=\%\^]+ ?[0-9]+ ?>([1-3])/)[1];
          var CurrentStorage = localStorage.getItem("Note" + NoteNr)
          localStorage.setItem("Note" + NoteNr, CurrentStorage + "\n" + CalculatedNumber);
          document.getElementById("wrapperWrapper").classList.remove("MenuMoveIn");
          DefinVariables(NoteNr)
        }
        if (/(( ?[0-9]+ ?)[\*\-\/\+\=\%\^])+( ?[0-9]+ ?)>c/g.test(UserInputA)) {
          AddToClipboard(CalculatedNumber)
          console.log("Text has been copied to the clipboard")
        }

        document.getElementById("OutputID").innerHTML = CalculatedNumber;
        document.getElementById("OutputIDBefore").innerHTML = CalculatedNumber;
        document.getElementById("OutputID").style.visibility = "visible";
      } else if (/password ?[0-9]+/.test(UserInputA.toLowerCase())) {
        TimesWrong = 0;
        var number = Number(UserInputA.match(/\d+/)[0])
        if (number > 32) {
          number = 32
        }
        if (number < 6) {
          number = 6
        }
        var chars = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()-+<>ABCDEFGHIJKLMNOP1234567890";

        if (number != Password.length) {
          GeneratePw()

          function GeneratePw() {
            Password = "";
            for (var i = 0; i < number; i++) {
              var x = Math.floor(Math.random() * (chars.length));
              Password += chars.charAt(x);
            }
            if (Password.includes("<")) { // < Cant be displayed, has to be replaced
              Password = Password.replace("<", "&lt;")
              console.log("Password Included <", Password) 
            }
            if (!/^(?=.{6,33}$)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*()-+<>]).*$/.test(Password)) {
              console.log("PW didnt match the requirements ")
              GeneratePw()
            } else {
              console.log('Password', Password);

            }
          }
        }
        if (/password ?[0-9]+ ?> ?[1-3]/.test(UserInputA.toLowerCase())) {
          NoteNr = Number(UserInputA.match(/\d+/g)[1])
          var CurrentStorage = localStorage.getItem("Note" + NoteNr)
          localStorage.setItem("Note" + NoteNr, CurrentStorage + "\n" + Password);
          document.getElementById("wrapperWrapper").classList.remove("MenuMoveIn");
          DefinVariables(NoteNr)
        }
        if (/password ?[0-9]+ ?> ?c/.test(UserInputA.toLowerCase())) {
          AddToClipboard(Password)
          console.log("Text has been copied to the clipboard")
        }
        document.getElementById("OutputID").innerHTML = Password;
        document.getElementById("OutputIDBefore").innerHTML = Password;
        document.getElementById("OutputID").style.visibility = "visible";
      } else if (/number ?[0-9]+/.test(UserInputA.toLowerCase())) {
        TimesWrong = 0;
        var number = Number(UserInputA.match(/\d+/)[0])

        if (number != GenNumber.length) {
          GenNumber = "";
          for (var i = 0; i < number; i++) {
            var x = Math.floor(Math.random() * 10);
            GenNumber += x;
          }
        }

        if (/number ?[0-9]+ ?> ?[1-3]/.test(UserInputA.toLowerCase())) {
          NoteNr = Number(UserInputA.match(/\d+/g)[1])
          var CurrentStorage = localStorage.getItem("Note" + NoteNr)
          localStorage.setItem("Note" + NoteNr, CurrentStorage + "\n" + GenNumber);
          document.getElementById("wrapperWrapper").classList.remove("MenuMoveIn");
          DefinVariables(NoteNr)
        }

        if (/number ?[0-9]+ ?> ?c/.test(UserInputA.toLowerCase())) {
          AddToClipboard(GenNumber)
          console.log("Text has been copied to the clipboard")
        }
        document.getElementById("OutputID").innerHTML = GenNumber;
        document.getElementById("OutputIDBefore").innerHTML = GenNumber;
        document.getElementById("OutputID").style.visibility = "visible";
      } else if (TimesWrong >= 5) {
        document.getElementById("OutputID").style.visibility = "hidden";
        TimesWrong = 0;
      } else {
        TimesWrong++;
      }
    } else {
      document.getElementById("OutputID").style.visibility = "hidden";
    }
  }

  // Credit: https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
  function AddToClipboard(CopyText) {
    console.log("Creating Textarea to copy")
    const el = document.createElement('textarea');
    el.value = CopyText;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
  }
  // var input;

  // function CalcT() {
  //   input = document.getElementById("search-input").value;
  //   if (/[^0-9+/*-]/g.test(input) == 0 && input.length != 0) {
  //     if (!isNaN(input) && input <= 24 && input >= 0 && LookedUpAlready == 1) {
  //       console.log("Looking for weather at " + input)

  //       TimeWeather(input)
  //     }
  //     var SplitedInput = input.split(/[/*+-]/g)
  //     var Operations = input.split(/[^/*+-]/g)
  //     var OperationsClean = Operations.filter(function (n) {
  //       return n != ""
  //     });

  //     var CurrentNumber = SplitedInput[0]
  //     var CurrentOperationPossition = 0

  //     if (!SplitedInput.includes("")) {

  //       while (CurrentOperationPossition <= OperationsClean.length - 1) {
  //         CurrentNumber = eval(CurrentNumber + OperationsClean[CurrentOperationPossition] + SplitedInput[
  //           CurrentOperationPossition + 1])
  //         CurrentOperationPossition += 1;
  //       }
  //       document.getElementById("OutputID").innerHTML = CurrentNumber;
  //       console.log("Calculated")
  //       document.getElementById("OutputID").style.visibility = "visible"
  //     } else {
  //       console.log("Error")
  //     }
  //   } else {
  //     document.getElementById("OutputID").style.visibility = "hidden"
  //     if (input.length = 0) {
  //       TimeWeather(0)
  //     }
  //   }
  // }
</script>


<style type="text/css">
  /*Buttons*/

  .buttonS > a,
  .button {
    min-width: 120px;
    margin: 0.8em;
    padding: 0.6em 1.2em;
    background: none;
    color: inherit;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    font-size: 127.5%;
    font-weight: 400;
    border: 2px solid;
    border-color: #ffffff66 !important;
    -webkit-transition: border-color 0.4s, color 0.4s;
    transition: border-color 0.4s, color 0.4s;
  }

  .buttonS > a:focus,
  .button:focus {
    outline: none;
  }

  .button>span {
    vertical-align: middle;
  }

  .buttonS > a::before,
  .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #71C7F2;
    /* 10161f */
    /* Area Hover*/
    z-index: -1;
    opacity: 0;
    -webkit-transform: scale3d(0.6, 1, 1);
    transform: scale3d(0.6, 1, 1);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s ease-in-out;
    transition: transform 0.4s, opacity 0.4s ease-in-out;
  }

  .buttonS > a,
  .buttonS > a::before,
  .button,
  .button::before {
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  }

  .buttonS > a:focus,
  .buttonS > a:hover,
  .button:focus,
  .button:hover {
    color: #fff;
    /*Font Color Hover*/
    border-color: #fff;
    /*Border Color Hover*/
  }

  .buttonS > a:focus::before,
  .buttonS > a:hover::before,
  .button:focus::before,
  .button:hover::before {
    opacity: 0.08;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  button,
  button:focus {
    font-family: 'Indie Flower', cursive;
  }
</style>

<script>
  var UpOrDown = 0

  function BugFixingIsEasy() {
    // Dont Remove - I dont know why but if you remove this function, the following wont work, "Uncaught TypeError: 0 is not a function"
  }

  /* Credit for the Off Canvas menu: https://codepen.io/markmurray/pen/yyNZpz */


  (function (window, document) {

    var prefix = "",
      _addEventListener, onwheel, support;

    // detect event model
    if (window.addEventListener) {
      _addEventListener = "addEventListener";
    } else {
      _addEventListener = "attachEvent";
      prefix = "on";
    }

    // detect available wheel event
    support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
      document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
      "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox

    window.addWheelListener = function (elem, callback, useCapture) {
      _addWheelListener(elem, support, callback, useCapture);

      // handle MozMousePixelScroll in older Firefox
      if (support == "DOMMouseScroll") {
        _addWheelListener(elem, "MozMousePixelScroll", callback, useCapture);
      }
    };

    function _addWheelListener(elem, eventName, callback, useCapture) {
      elem[_addEventListener](prefix + eventName, support == "wheel" ? callback : function (originalEvent) {
        !originalEvent && (originalEvent = window.event);

        // create a normalized event object
        var event = {
          // keep a ref to the original event object
          originalEvent: originalEvent,
          target: originalEvent.target || originalEvent.srcElement,
          type: "wheel",
          deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
          deltaX: 0,
          deltaZ: 0,
          preventDefault: function () {
            originalEvent.preventDefault ?
              originalEvent.preventDefault() :
              originalEvent.returnValue = false;
          }
        };

        // calculate deltaY (and deltaX) according to the event
        if (support == "mousewheel") {
          event.deltaY = -1 / 40 * originalEvent.wheelDelta;
          // Webkit also support wheelDeltaX
          originalEvent.wheelDeltaX && (event.deltaX = -1 / 40 * originalEvent.wheelDeltaX);
        } else {
          event.deltaY = originalEvent.detail;
        }

        // it's time to fire the callback
        return callback(event);

      }, useCapture || false);
    }

  })(window, document);

  var CalledJson = 0;

  function Up() {
    if (UpOrDown % 2 == 0) {
      console.log("Up success");
      $(this).toggleClass("open");
      $("#Image").toggleClass("nav-open");
      $("nav ul li").toggleClass("animate");
      UpOrDown += 1
      if (CalledJson == 0) {
        CalledJson = 1
        GetJson()
      }
    }
  }

  function Down() {
    if (UpOrDown % 2 == 1) {
      console.log("Down success");
      $(this).toggleClass("open");
      $("#Image").toggleClass("nav-open");
      $("nav ul li").toggleClass("animate");
      UpOrDown += 1
    }
  }


  addWheelListener(document, function (e) {
    if (document.getElementById("wrapperWrapper").matches(":hover")) {
      console.log("Changing notes");
      e.deltaY < 0 ? NotesDown() : NotesUp();
      e.preventDefault();
    } else {
      e.deltaY < 0 ? Down() : Up();
      e.preventDefault();
    }
  });

  /* Credit: https://developer.mozilla.org/en-US/docs/Web/Events/wheel#Listening_to_this_event_across_browser */
</script>

<script type="text/javascript">
  var LookedUpAlready = 0;
  var Output;
  var ConvertetOutput;

  async function GetJson() {
    if (LookedUpAlready == 0) {

      console.log("LookedUpAlready", LookedUpAlready)
      LookedUpAlready += 1;

      let url =
        'https://api.openweathermap.org/data/2.5/forecast?q=Leverkusen&units=metric&APPID=22d4e741c978538ccba7d43999bb6441';
      //let url = 'https://api.openweathermap.org/data/2.5/weather?q=London&APPID=22d4e741c978538ccba7d43999bb6441';

      await fetch(url)
        .then(res => res.json())
        .then((out) => {
          Output = out
          console.log(Output);
        }).catch(err => console.error(err));
      Work()
    } else {
      console.log("LookedUpAlready", LookedUpAlready)
    }
  }

  var NextDay = 0;

  function TimeWeather(u) {
    var HourOfDay = new Date().getHours();
    NextDay = 0;
    if (u - HourOfDay < 0) {
      console.log("Time has passed already, looking for next day")
      u = Number(u) + 24
      console.log("24 added to u, " + u)
      console.log("Shift days by one")
      NextDay = 1;
    }

    i = Math.round((u - HourOfDay) / 3) - 1
    console.log("Element of List = " + i)
    whichObject = 0
    Work()
  }

  var i = 0;

  function Work() {
    console.log("Start Work,i =" + i)
    //for (i = 0; i < 40; i+=8) {
    while (i <= 40) {
      if (i > Output.list.length - 7) {
        console.log("Last one")
        i = eval(Output.list.length - 1)
        console.log("i " + i)
        AddDayAndTemerature(whichObject, i)
        AddWeatherIcons()
        break;
      }
      console.log(" Output.list.length - 8 " + eval(Output.list.length - 8))
      console.log("i " + i)
      AddDayAndTemerature(whichObject, i)
      AddWeatherIcons()

      whichObject += 1
      i += 8
    }
  }

  function AddWeatherIcons() {
    switch (Output.list[i].weather["0"].main) {
      case "Rain":
        console.log("Rain")
        rainy()
        break;
      case "Clouds":
        console.log("Clouds")
        cloudy()
        break;
      case "Clear":
        console.log("Clear")
        sunny()
        break;
      default:
        console.log("Error: Weather not found - add to switch")
    }
  }

  function AddDayAndTemerature(InputDays, InputHours) {

    switch (((new Date().getDay()) + InputDays + NextDay) % 7) {
      case 0:
        console.log("Sunday, " + Output.list[InputHours].main.temp + "C°")
        document.querySelector("div.Text.Obj" + InputDays).innerHTML = "Sunday, " + Output.list[InputHours].main.temp +
          "C°"
        break;
      case 1:
        console.log("Monday, " + Output.list[InputHours].main.temp + "C°")
        document.querySelector("div.Text.Obj" + InputDays).innerHTML = "Monday, " + Output.list[InputHours].main.temp +
          "C°"
        break;
      case 2:
        console.log("Tuesday, " + Output.list[InputHours].main.temp + "C°")
        document.querySelector("div.Text.Obj" + InputDays).innerHTML = "Tuesday, " + Output.list[InputHours].main.temp +
          "C°"
        break;
      case 3:
        console.log("Wednesday, " + Output.list[InputHours].main.temp + "C°")
        document.querySelector("div.Text.Obj" + InputDays).innerHTML = "Wednesday, " + Output.list[InputHours].main.temp +
          "C°"
        break;
      case 4:
        console.log("Thursday, " + Output.list[InputHours].main.temp + "C°")
        document.querySelector("div.Text.Obj" + InputDays).innerHTML = "Thursday, " + Output.list[InputHours].main.temp +
          "C°"
        break;
      case 5:
        console.log(InputHours)
        console.log("Friday, " + Output.list[InputHours].main.temp + "C°")
        document.querySelector("div.Text.Obj" + InputDays).innerHTML = "Friday, " + Output.list[InputHours].main.temp +
          "C°"
        break;
      case 6:
        console.log("Saturday, " + Output.list[InputHours].main.temp + "C°")
        document.querySelector("div.Text.Obj" + InputDays).innerHTML = "Saturday, " + Output.list[InputHours].main.temp +
          "C°"
        break;
      default:
        console.log("Error: no day?")
    }
  }
</script>

<script type="text/javascript">
  // Fork of https://codepen.io/joshbader/pen/EjXgqr

  var whichObject = 0

  function sun_shower() {
    console.log("sun_shower");
    console.log("Icons has been added to " + whichObject)
    document.querySelector("div[data-element=icon_Obj" + whichObject + "]").className = "icon sun-shower"
    document.querySelector("div[data-element=a_Obj" + whichObject + "]").className = "cloud"
    document.querySelector("div[data-element=a_a_Obj" + whichObject + "]").className = ""
    document.querySelector("div[data-element=b_Obj" + whichObject + "]").className = "sun"
    document.querySelector("div[data-element=b_a_Obj" + whichObject + "]").className = "rays"
    document.querySelector("div[data-element=b_b_Obj" + whichObject + "]").className = ""
    document.querySelector("div[data-element=c_Obj" + whichObject + "]").className = "rainIcon"
  }

  function thunder_storm() {
    console.log("thunder_storm")
    console.log("Icons has been added to " + whichObject)
    document.querySelector("div[data-element=icon_Obj" + whichObject + "]").className = "icon thunder-storm";
    document.querySelector("div[data-element=a_Obj" + whichObject + "]").className = "cloud";
    document.querySelector("div[data-element=a_a_Obj" + whichObject + "]").className = "cloud";
    document.querySelector("div[data-element=b_Obj" + whichObject + "]").className = "lightning";
    document.querySelector("div[data-element=b_a_Obj" + whichObject + "]").className = "bolt"
    document.querySelector("div[data-element=b_b_Obj" + whichObject + "]").className = "bolt"
    document.querySelector("div[data-element=c_Obj" + whichObject + "]").className = ""
  }

  function cloudy() {
    console.log("cloudy")
    console.log("Icons has been added to " + whichObject)
    document.querySelector("div[data-element=icon_Obj" + whichObject + "]").className = "icon cloudy";
    document.querySelector("div[data-element=a_Obj" + whichObject + "]").className = "cloud";
    document.querySelector("div[data-element=a_a_Obj" + whichObject + "]").className = "";
    document.querySelector("div[data-element=b_Obj" + whichObject + "]").className = "cloud";
    document.querySelector("div[data-element=b_a_Obj" + whichObject + "]").className = ""
    document.querySelector("div[data-element=b_b_Obj" + whichObject + "]").className = ""
    document.querySelector("div[data-element=c_Obj" + whichObject + "]").className = ""
  }

  function flurries() {
    console.log("flurries")
    console.log("Icons has been added to " + whichObject)
    document.querySelector("div[data-element=icon_Obj" + whichObject + "]").className = "icon flurries";
    document.querySelector("div[data-element=a_Obj" + whichObject + "]").className = "cloud";
    document.querySelector("div[data-element=a_a_Obj" + whichObject + "]").className = "";
    document.querySelector("div[data-element=b_Obj" + whichObject + "]").className = "snow";
    document.querySelector("div[data-element=b_a_Obj" + whichObject + "]").className = "flake"
    document.querySelector("div[data-element=b_b_Obj" + whichObject + "]").className = "flake"
    document.querySelector("div[data-element=c_Obj" + whichObject + "]").className = ""
  }

  function sunny() {
    console.log("sunny")
    console.log("Icons has been added to " + whichObject)
    document.querySelector("div[data-element=icon_Obj" + whichObject + "]").className = "icon sunny";
    document.querySelector("div[data-element=a_Obj" + whichObject + "]").className = "sun";
    document.querySelector("div[data-element=a_a_Obj" + whichObject + "]").className = "rays";
    document.querySelector("div[data-element=b_Obj" + whichObject + "]").className = "";
    document.querySelector("div[data-element=b_a_Obj" + whichObject + "]").className = ""
    document.querySelector("div[data-element=b_b_Obj" + whichObject + "]").className = ""
    document.querySelector("div[data-element=c_Obj" + whichObject + "]").className = ""
  }

  function rainy() {
    console.log("rainy")
    console.log("Icons has been added to " + whichObject)
    document.querySelector("div[data-element=icon_Obj" + whichObject + "]").className = "icon rainy";
    document.querySelector("div[data-element=a_Obj" + whichObject + "]").className = "cloud";
    document.querySelector("div[data-element=a_a_Obj" + whichObject + "]").className = "";
    document.querySelector("div[data-element=b_Obj" + whichObject + "]").className = "rainIcon";
    document.querySelector("div[data-element=b_a_Obj" + whichObject + "]").className = ""
    document.querySelector("div[data-element=b_b_Obj" + whichObject + "]").className = ""
    document.querySelector("div[data-element=c_Obj" + whichObject + "]").className = ""
  }
</script>

<style media="screen">
  :root {
    --main-color: #256984;
  }

  .containIcons {
    color: #17191d;
  }

  .icon {
    position: relative;
    display: inline-block;
    width: 12em;
    height: 10em;
    font-size: 0.6em;
    /* control icon size here */
  }

  .cloud {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 3.6875em;
    height: 3.6875em;
    margin: -1.84375em;
    background: currentColor;
    border-radius: 50%;
    box-shadow: -2.1875em 0.6875em 0 -0.6875em,
    2.0625em 0.9375em 0 -0.9375em,
    0 0 0 0.375em var(--main-color),
    -2.1875em 0.6875em 0 -0.3125em var(--main-color),
    2.0625em 0.9375em 0 -0.5625em var(--main-color);
  }

  .cloud:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -0.5em;
    display: block;
    width: 4.5625em;
    height: 1em;
    background: currentColor;
    box-shadow: 0 0.4375em 0 -0.0625em var(--main-color);
  }

  .cloud:nth-child(2) {
    z-index: 0;
    background: var(--main-color);
    box-shadow: -2.1875em 0.6875em 0 -0.6875em var(--main-color),
    2.0625em 0.9375em 0 -0.9375em var(--main-color),
    0 0 0 0.375em var(--main-color),
    -2.1875em 0.6875em 0 -0.3125em var(--main-color),
    2.0625em 0.9375em 0 -0.5625em var(--main-color);
    opacity: 0.3;
    transform: scale(0.5) translate(6em, -3em);
    animation: cloud 4s linear infinite;
  }

  .cloud:nth-child(2):after {
    background: var(--main-color);
  }

  /*Color1*/

  .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5em;
    height: 2.5em;
    margin: -1.25em;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 0.375em var(--main-color);
    animation: spin 12s infinite linear;
  }

  .rays {
    position: absolute;
    top: -2em;
    left: 50%;
    display: block;
    width: 0.375em;
    height: 1.125em;
    margin-left: -0.1875em;
    background: var(--main-color);
    border-radius: 0.25em;
    box-shadow: 0 5.375em var(--main-color);
  }

  .rays:before,
  .rays:after {
    content: '';
    position: absolute;
    top: 0em;
    left: 0em;
    display: block;
    width: 0.375em;
    height: 1.125em;
    transform: rotate(60deg);
    transform-origin: 50% 3.25em;
    background: var(--main-color);
    border-radius: 0.25em;
    box-shadow: 0 5.375em var(--main-color);
  }

  .rays:before {
    transform: rotate(120deg);
  }

  .cloud+.sun {
    margin: -2em 1em;
  }

  .rainIcon,
  .lightning,
  .snow {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 3.75em;
    height: 3.75em;
    margin: 0.375em 0 0 -2em;
    background: currentColor;
  }

  .rainIcon:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 1.125em;
    height: 1.125em;
    margin: -1em 0 0 -0.25em;
    background: #0cf;
    border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
    box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2),
    -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2),
    -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
    transform: rotate(-28deg);
    animation: rainIcon 3s linear infinite;
  }

  .bolt {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.25em 0 0 -0.125em;
    color: var(--main-color);
    opacity: 0.3;
    animation: lightning 2s linear infinite;
  }

  .bolt:nth-child(2) {
    width: 0.5em;
    height: 0.25em;
    margin: -1.75em 0 0 -1.875em;
    transform: translate(2.5em, 2.25em);
    opacity: 0.2;
    animation: lightning 1.5s linear infinite;
  }

  .bolt:before,
  .bolt:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin: -1.625em 0 0 -1.0125em;
    border-top: 1.25em solid transparent;
    border-right: 0.75em solid;
    border-bottom: 0.75em solid;
    border-left: 0.5em solid transparent;
    transform: skewX(-10deg);
  }

  .bolt:after {
    margin: -0.25em 0 0 -0.25em;
    border-top: 0.75em solid;
    border-right: 0.5em solid transparent;
    border-bottom: 1.25em solid transparent;
    border-left: 0.75em solid;
    transform: skewX(-10deg);
  }

  .bolt:nth-child(2):before {
    margin: -0.75em 0 0 -0.5em;
    border-top: 0.625em solid transparent;
    border-right: 0.375em solid;
    border-bottom: 0.375em solid;
    border-left: 0.25em solid transparent;
  }

  .bolt:nth-child(2):after {
    margin: -0.125em 0 0 -0.125em;
    border-top: 0.375em solid;
    border-right: 0.25em solid transparent;
    border-bottom: 0.625em solid transparent;
    border-left: 0.375em solid;
  }

  .flake:before,
  .flake:after {
    content: '\2744';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1.025em 0 0 -1.0125em;
    color: var(--main-color);
    opacity: 0.2;
    animation: spin 8s linear infinite reverse;
  }

  .flake:after {
    margin: 0.125em 0 0 -1em;
    font-size: 1.5em;
    opacity: 0.4;
    animation: spin 14s linear infinite;
  }

  .flake:nth-child(2):before {
    margin: -0.5em 0 0 0.25em;
    font-size: 1.25em;
    opacity: 0.2;
    animation: spin 10s linear infinite;
  }

  .flake:nth-child(2):after {
    margin: 0.375em 0 0 0.125em;
    font-size: 2em;
    opacity: 0.4;
    animation: spin 16s linear infinite reverse;
  }


  /* Animations */

  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes cloud {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.3;
    }
    100% {
      opacity: 0;
      transform: scale(0.5) translate(-200%, -3em);
    }
  }

  @keyframes rainIcon {
    0% {
      background: #0cf;
      box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2),
      -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2),
      -1.375em -0.125em 0 #0cf;
    }
    25% {
      box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2),
      -0.875em 1.125em 0 -0.125em #0cf,
      -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
    }
    50% {
      background: rgba(255, 255, 255, 0.3);
      box-shadow: 0.625em 0.875em 0 -0.125em #0cf,
      -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2),
      -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
    }
    100% {
      box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2),
      -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2),
      -1.375em -0.125em 0 #0cf;
    }
  }

  @keyframes lightning {
    45% {
      color: #fff;
      background: #fff;
      opacity: 0.2;
    }
    50% {
      color: #0cf;
      background: #0cf;
      opacity: 1;
    }
    55% {
      color: #fff;
      background: #fff;
      opacity: 0.2;
    }
  }
</style>

<style>
  /* Style for Notes */

  .MenuMoveIn {
    margin-right: -350px;
  }

  #NotesMenuTrigger {
    height: 100vh;
    width: 1px;
    position: fixed;
    top: 0;
    right: 0;
    background-color: transparent;
    z-index: 5;
  }

  #wrapperWrapper {
    top: 0;
    position: absolute;
    right: 0px;
    box-shadow: 0px 0px 30px 7.5px rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 306.2px;
    padding-left: 15px;
    background: #1A1E23;
    display: flex;
    justify-content: flex-end;
    transition: all 0.2s ease-out;
    font-family: "Lato", sans-serif;
    -webkit-font-smoothing: antialiased;
    z-index: 2;
  }

  .Wrapper {
    margin-right: 25px;
  }

  .Wrapper nav {
    right: 0;
    margin-top: 10%;
    position: relative;
    padding-bottom: 10px;
  }

  .line {
    height: 2px;
    position: absolute;
    bottom: 0;
    margin: 10px 0 0 0;
    background: #FF1847;
    transition: 0.3s;
  }

  .Wrapper nav ul {
    padding: 0;
    margin: 0 2px 0 2px;
    list-style: none;
    display: flex;
  }

  .Wrapper nav ul li {
    margin: 0 40px 0 0;
    opacity: 0.4;
    transition: all 0.4s ease;
  }

  .Wrapper nav ul li:hover {
    opacity: 0.7;
  }

  .Wrapper nav ul li.active {
    opacity: 1;
  }

  .Wrapper nav ul li:last-child {
    margin-right: 0;
  }

  .Wrapper nav ul li div {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    display: block;
    font-weight: 600;
    letter-spacing: 0.2em;
    font-size: 14px;
    cursor: pointer;
  }

  textarea {
    font-family: "Lato", sans-serif !important;
    font-size: 1em;
    margin-top: 15px;
    color: #eee;
    width: 100%;
    height: 90%;
    outline: none;
    border: none;
    resize: none;
    background-color: transparent
  }
</style>

<script>
  // Script for Notes
  var sSaveIn;

  function Load(NumberL) {
    document.getElementById("idTextarea").value = localStorage.getItem("Note" + NumberL);
  }

  function writeNote() {
    console.log('Out');
    RemindMeFormate();
    localStorage.setItem("Note" + sSaveIn, document.getElementById("idTextarea").value);
    LoadReminders();
    NoteHasFocus = !NoteHasFocus;
    console.log('NoteHasFocus', NoteHasFocus);

  }

  function DefinVariables(activeTab) {
    var vTab1 = document.getElementById("tab" + activeTab);
    var nOffsetLeft = vTab1.offsetLeft;
    var nOffsetWidth = vTab1.offsetWidth;
    document.getElementById("lineId").style = "left: " + nOffsetLeft + "px; width:" + nOffsetWidth +
      "px;"
    document.querySelector(".active").classList.remove("active");
    vTab1.classList.add("active");
    Load(activeTab);
    sSaveIn = activeTab
  }
  DefinVariables(1)

  function ToggleMenu() {
    console.log("Toggle");
    document.getElementById("wrapperWrapper").classList.toggle("MenuMoveIn");
    document.activeElement.blur();
  }

  var NoteHasFocus = false;

  function NoteFocus() {
    NoteHasFocus = !NoteHasFocus;
    console.log('NoteHasFocus', NoteHasFocus);
  }

  var IsMouseOverNotes = false;

  function NotesUp() {
    if (sSaveIn < 3) {
      writeNote()
      DefinVariables(1 + sSaveIn)
    }
  }

  function NotesDown() {
    if (sSaveIn > 1) {
      writeNote()
      DefinVariables(sSaveIn - 1)
    }
  }

  // Script for remindme

  function RemindMeFormate() {
    var TextInNote = document.getElementById("idTextarea").value.toLowerCase().split(/[ ]|(?=\n)/).join(" ").replace(
      /\n/g, "").split(" ")
    // this may seem unnessesary complicated, but it is needed to keep the array in line with TextInNoteBackup
    var TextInNoteBackup = document.getElementById("idTextarea").value.split(/[ ]|(?=\n)/); // To keep formatting
    console.log(TextInNote);
    console.log(TextInNoteBackup);
    var positionOfRemindMe = TextInNote.indexOf("remindme");
    if (positionOfRemindMe >= 0) {
      console.log('remindme at position ', positionOfRemindMe);
      console.log("Remind Me is followed by ", TextInNote[positionOfRemindMe + 1]);
      var d = 0;

      function WorkWithWords(nextOne) {
        console.log("Debug WorkWithWords")
        switch (TextInNote[positionOfRemindMe + nextOne + 1]) {
          case ("at"):
            MoreRemindMes();
            break;
          case ("in"):
            if (isNumeric(TextInNote[positionOfRemindMe + nextOne + 2])) {
              var UserNumber = TextInNote[positionOfRemindMe + nextOne + 2];
              var m = 0;
              var h = 0;
              var HasAnd = 0;

              function mhOrd() {
                switch (TextInNote[positionOfRemindMe + nextOne + HasAnd + 3]) {
                  case "hours":
                  case "hour":
                  case "h":
                    // Hours
                    h += Number(TextInNote[positionOfRemindMe + nextOne + HasAnd + 2])
                    break;
                  case "minutes":
                  case "minute":
                  case "min":
                  case "m":
                    // Minutes
                    m += Number(TextInNote[positionOfRemindMe + nextOne + HasAnd + 2])
                    break;
                  case "days":
                  case "day":
                  case "d":
                    // Days
                    d += Number(TextInNote[positionOfRemindMe + nextOne + HasAnd + 2])
                    break;
                }
              }
              mhOrd()

              if (TextInNote[positionOfRemindMe + nextOne + 4] == "and") {
                console.log("and")
                HasAnd += 3;
                mhOrd()
                GoOn(true)
              } else {
                GoOn(false)
              }

              function GoOn(And) {

                // Positions RemindMe (Monday/tomorrow)     in        4        hours          (and 15 minutes)
                // Numbers      0             (1)       1+nextOne 2+nextOne  3+nextOne      4+nextOne()           
                // Output    RemindMe       Monday          at    hh:mm am

                var today = new Date();

                var minutes = (today.getMinutes() + m) % 60;

                var hours = (today.getHours() + h + Math.floor((today.getMinutes() + m) / 60)) % 24;

                var day = WhatDayIsIt((today.getDay() + d + Math.floor((today.getHours() + h + Math.floor((today.getMinutes() +
                  m) / 60)) / 24)) % 7);

                console.log('minutes', minutes, 'hours', hours, "day", day, 'm', m, 'h', h, 'd', d);


                var minutesW0 = function () {
                  if (minutes < 10) {
                    return "0" + minutes;
                  } else {
                    return minutes;
                  }
                }



                var TimeWAmPm = function () {
                  if (hours > 12) {
                    return (hours - 1) % 12 + 1 + ":" + minutesW0() + " pm"
                  } else {
                    return hours + ":" + minutesW0() + " am"
                  }
                }

                console.log("positionOfRemindMe + 1", positionOfRemindMe + 1)
                TextInNoteBackup[positionOfRemindMe + 1] = day
                TextInNoteBackup[positionOfRemindMe + 2] = "at"
                TextInNoteBackup[positionOfRemindMe + 3] = TimeWAmPm()

                if (nextOne == 1 && And) {
                  // remove last 4
                  console.log("1")
                  TextInNoteBackup.splice(positionOfRemindMe + 4, 4)
                } else if (nextOne == 1 && !And) {
                  console.log("2")
                  //remove last one
                  TextInNoteBackup.splice(positionOfRemindMe + 4, 1)
                } else if (!nextOne == 1 && And) {
                  console.log("3")
                  //remove last 3
                  TextInNoteBackup.splice(positionOfRemindMe + 4, 3)
                }

                // Put it all together
                console.log("Yay!")
                document.getElementById("idTextarea").value = TextInNoteBackup.join(' ');
                MoreRemindMes()
              }
              break;
            }
          case ("tomorrow"):
            // convert to day of week
            if (nextOne != 1) {
              TextInNoteBackup[positionOfRemindMe + 1] = WhatDayIsIt((new Date().getDay()) % 7 + 1)
              // Update Textarea
              document.getElementById("idTextarea").value = TextInNoteBackup.join(' ');
              d += 1;
              WorkWithWords(1);
              break;
            } else {
              console.log("This dosent make sence a");
              break;
            }
          case ("today"):
            // convert to day of week
            if (nextOne != 1) {
              TextInNoteBackup[positionOfRemindMe + 1] = WhatDayIsIt((new Date().getDay()))
              // Update Textarea
              document.getElementById("idTextarea").value = TextInNoteBackup.join(' ');
              d = 0;
              WorkWithWords(1);
              break;
            } else {
              console.log("This dosent make sence b");
              break;
            }
          case ("monday"):
            //  d += how many days till x? 
            if (nextOne != 1) {
              d += ((1 + 7) - (new Date().getDay())) % 7;
              WorkWithWords(1);
              break;
            }
          case ("tuesday"):
            if (nextOne != 1) {
              d += ((2 + 7) - (new Date().getDay())) % 7;
              WorkWithWords(1);
              break;
            }
          case ("wednesday"):
            if (nextOne != 1) {
              d += ((3 + 7) - (new Date().getDay())) % 7;
              WorkWithWords(1);
              break;
            }
          case ("thursday"):
            if (nextOne != 1) {
              d += ((4 + 7) - (new Date().getDay())) % 7;
              WorkWithWords(1);
              break;
            }
          case ("friday"):
            if (nextOne != 1) {
              d += ((5 + 7) - (new Date().getDay())) % 7;
              WorkWithWords(1);
              break;
            }
          case ("saturday"):
            if (nextOne != 1) {
              d += ((6 + 7) - (new Date().getDay())) % 7;
              WorkWithWords(1);
              break;
            }
          case ("sunday"):
            if (nextOne != 1) {
              d += ((0 + 7) - (new Date().getDay())) % 7;

              WorkWithWords(1);
              break;
            }
          default:
            MoreRemindMes();
        }
      }
      WorkWithWords(0)

      function MoreRemindMes() { // Could Call RemindMeFormate() instead, with positionOfRemindMe, maybe some other day
        console.log("Debug x")
        if (TextInNote.indexOf("remindme", positionOfRemindMe + 1) >= 0) {
          positionOfRemindMe = TextInNote.indexOf("remindme", (positionOfRemindMe + 1))
          console.log("found another RemindMe at ", positionOfRemindMe, "Resetting Variabls");
          d = 0;
          TextInNote = document.getElementById("idTextarea").value.toLowerCase().split(/[ ]|.(?=\n)/).join(" ").replace(
            /\n/g, "").split(" ")
          TextInNoteBackup = document.getElementById("idTextarea").value.split(/[ ]|.(?=\n)/);
          WorkWithWords(0)
        } else {
          console.log("all RemindMes found")
        }
      }
    }
  }

  var WhatDayIsIt = function (Days) {
    switch (Days) {
      case 0:
        return "Sunday"
      case 1:
        return "Monday"
      case 2:
        return "Tuesday"
      case 3:
        return "Wednesday"
      case 4:
        return "Thursday"
      case 5:
        return "Friday"
      case 6:
        return "Saturday"

    }
  }

  function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  }

  function LoadReminders() { // onload
    var LoadedArray = (localStorage.getItem("Note1") + " " + localStorage.getItem("Note2") + " " + localStorage.getItem(
      "Note3")).toLowerCase().split(/[ ]|(?=\n)/).join(" ").replace(/\n/g, "").split(" ")
    console.log(LoadedArray)

    LookForRemindme(0)

    function LookForRemindme(Advanced) {
      console.log("Start looking at position", Advanced)
      if (LoadedArray.indexOf("remindme", Advanced) >= 0) {
        // RemindMe in Array
        positionOfRemindMe = LoadedArray.indexOf("remindme", Advanced);
        console.log("Found remind me at Position ", positionOfRemindMe);
        var today = new Date();
        var InputDay = 0;
        var InputTime = function () {
          var TimeTemp = Number(LoadedArray[positionOfRemindMe + 3].split(":")[0]) + (Number(LoadedArray[
            positionOfRemindMe + 3].split(":")[1]) / 60)
          if (LoadedArray[positionOfRemindMe + 4] == "pm") {
            TimeTemp += 12;
            return TimeTemp;
          } else {
            return TimeTemp;
          }
        };

        switch (LoadedArray[positionOfRemindMe + 1]) {
          case ("sunday"):
            InputDay = 0;
            break;
          case ("monday"):
            InputDay = 1;
            break;
          case ("tuesday"):
            InputDay = 2;
            break;
          case ("wednesday"):
            InputDay = 3;
            break;
          case ("thursday"):
            InputDay = 4;
            break;
          case ("friday"):
            InputDay = 5;
            break;
          case ("saturday"):
            InputDay = 6;
            break;
        }

        if (InputDay == today.getDay() && today.getHours() + (today.getMinutes() / 60) <= InputTime() && today.getHours() +
          (today.getMinutes() / 60) + 1 / 3 >= InputTime()) {
          console.log("RemindMe in next 20 min found");
          ColorClock();
        } else if ((InputDay + 6) % 7 == today.getDay() && ((today.getHours() + today.getMinutes() / 60) + 1 / 3) % 24 >=
          InputTime()) {
          console.log("RemindMe in next 20 min found (Next day)");
          ColorClock();
        } else {
          // No Remindme for Today
          console.log("Not in 20 min")
          LookForRemindme(positionOfRemindMe + 1)
          document.getElementById("clock").classList.remove("OrangeClock")
        }

        function ColorClock() {
          document.getElementById("clock").classList.add("OrangeClock")
        }
      } else {
        console.log("No RemindMe found");
        document.getElementById("clock").classList.remove("OrangeClock")
      }
    }
  }


  // case (sunday):
  // case (monday):
  // case (tuesday):
  // case (wednesday):
  // case (thursday):
  // case (friday):
  // case (saturday):


  // function RemindMeFormate() {
  //   var TextInNote = document.getElementById("idTextarea").value.toLowerCase().split(/[\s]+/);
  //   var TextInNoteBackup = document.getElementById("idTextarea").value.toLowerCase().split(/[ ]+/);
  //   console.log(TextInNote);
  //   var positionOfRemindMe = TextInNote.indexOf("remindme");
  //   if (positionOfRemindMe > 0) { //should be while console.log('remindme
  //     at position
  //       ', positionOfRemindMe); console.log(TextInNote[positionOfRemindMe + 1]); switch (TextInNote[positionOfRemindMe +
  //       1]) {
  //   case ("in"):
  //     console.log(TextInNote[positionOfRemindMe + 3]);
  //     switch (TextInNote[positionOfRemindMe + 3]) {
  //       case ("hours"):
  //       case ("h"):
  //         var today = new Date();
  //         var hour = function () {
  //           var CalculatedTime = Number(TextInNote[positionOfRemindMe +
  //             2]) + today.getHours() if (CalculatedTime < 13) {
  //             TextInNoteBackup[positionOfRemindMe + 3] = "am"
  //             return (CalculatedTime -
  //               1) % 12 + 1;
  //           } else
  //           if (CalculatedTime < 24) {
  //             TextInNoteBackup[positionOfRemindMe + 3] = "pm"
  //             return (CalculatedTime - 1) %
  //               12 + 1;
  //           } else {
  //             console.log("time is not today"); // Get Day return (CalculatedTime - 1) % 12 + 1; } } var min=f unction
  //             () {
  //               if (today.getMinutes() < 10) {
  //                 return "0" + today.getMinutes()
  //               } else {
  //                 return today.getMinutes()
  //               }
  //             };
  //             console.log(hour() +
  //               ":" + min());
  //             TextInNoteBackup[positionOfRemindMe + 2] = h our() + ":" + min();
  //             TextInNoteBackup[positionOfRemindMe + 1] = "at"
  //             document.getElementById("idTextarea").value = T extInNoteBackup.join(' ');
  //           }
  //         }
  //     }
  // }
</script>

<script>
  function AnimationsBugFixOnLoad() {
    setTimeout(function () {
      document.getElementById("Image").classList.remove("NoTransitions");
      console.log("Removed NoTransitions")
    }, 400); // Need delady to load image - Its a FEATURE, you can instantly open the weathereiget when opening a new Tab
  }

  window.onload = AnimationsBugFixOnLoad()
</script>

<style>

  @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Poor+Story');
* {
  font-family: 'Indie Flower', cursive;
  -webkit-font-smoothing: antialiased;
}

.title>span {
  font-family: 'Poor Story', cursive;
  font-size: 1.25em;
}

.nav-open {
  width: 90% !important;
  margin-top: 9em !important;
  transition: all 0.3s ease !important;
  -webkit-transition: all 0.3s ease !important;
  -moz-transition: all 0.3s ease !important;
  -ms-transition: all 0.3s ease !important;
  -o-transition: all 0.3s ease !important;
}

.Text {
  color: white;
  margin-top: -1em;
}

#BackgroundM>nav {
  /* Position Menu */
  position: absolute;
  top: 0;
  z-index: 0;
  margin-top: -0.5em;
  left: 20.8%;
  /* Not responsive */
}

#BackgroundM>nav ul {
  margin: 0;
  padding: 0;
}

#BackgroundM>nav ul li.animate {
  /* Triggered to fly in */
  top: 0;
}

.Information {
  position: absolute;
  left: 5%;
  margin-top: 6em;
}

#BackgroundM>nav ul li {
  /* Arrangement of Elements */
  display: inline-block;
  text-align: center;
  margin: 1em 2em;
  cursor: pointer;
  position: relative;
  top: -8em;
}

#BackgroundM>nav ul li:nth-child(1) {
  /* Fly in + Delay */
  -moz-transition: top 0.3s ease 0.15s;
  -o-transition: top 0.3s ease 0.15s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
  transition: top 0.3s ease 0.15s;
}

#BackgroundM>nav ul li:nth-child(2) {
  -moz-transition: top 0.3s ease 0.2s;
  -o-transition: top 0.3s ease 0.2s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  transition: top 0.3s ease 0.2s;
}

#BackgroundM>nav ul li:nth-child(3) {
  -moz-transition: top 0.3s ease 0.25s;
  -o-transition: top 0.3s ease 0.25s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
  transition: top 0.3s ease 0.25s;
}

#BackgroundM>nav ul li:nth-child(4) {
  -moz-transition: top 0.3s ease 0.3s;
  -o-transition: top 0.3s ease 0.3s;
  -webkit-transition: top 0.3s ease 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  transition: top 0.3s ease 0.3s;
  -ms-transition: top 0.3s ease 0.3s;
}

#BackgroundM>nav ul li:nth-child(5) {
  -moz-transition: top 0.3s ease 0.35s;
  -o-transition: top 0.3s ease 0.35s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
  transition: top 0.3s ease 0.35s;
}

#BackgroundM>nav ul li:nth-child(6) {
  -moz-transition: top 0.3s ease 0.35s;
  -o-transition: top 0.3s ease 0.35s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
  transition: top 0.3s ease 0.35s;
}

#BackgroundM>nav ul li:nth-child(7) {
  -moz-transition: top 0.3s ease 0.35s;
  -o-transition: top 0.3s ease 0.35s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
  transition: top 0.3s ease 0.35s;
}

#BackgroundM>nav ul li h4 {
  line-height: 2.5;
  /* Space Above */
}

#Image {
  position: relative;
  background-size: cover;
  background-image: url("starryNightFull.gif");
  background-position: center;
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  -moz-transition: all 0.3s ease 0.6s;
  -o-transition: all 0.3s ease 0.6s;
  -webkit-transition: all 0.3s ease 0.6s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
  transition: all 0.3s ease 0.6s;
  -ms-transition: all 0.3s ease 0.6s;
}

.stripe {
  position: relative;
  width: 40px;
  height: 25vh;
  color: lightgrey;
  z-index: 3;
  box-shadow: 20px 0 60px -6px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  clip: rect(-100vh, 10vw, 100vh, 0%);
}

.stripe .title {
  position: relative;
  width: 40px;
  height: 100%;
  float: left;
  box-sizing: border-box;
}

.stripe .title span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  font-weight: 300;
  /* Title Font weight */
}

.stripe .content {
  /* make moevable */
  position: absolute;
  left: calc(5vw + 20px);
  width: calc(90vw - 20px);
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
  font-weight: 400;
  /* Stripes Font weight */
  display: flex;
  justify-content: space-between;
}

.stripe .content div {
  height: 100%;
  width: 150px;
}

.stripe .content span {
  line-height: calc(25vh - 50px);
}

.stripe .content span a {
  text-decoration: none;
  color: white;
}

.button {
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  transition: box-shadow 0.5s ease !important;
  transition: transform 0.5s ease !important;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.25);
}

.button::before {
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

.button:hover {
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.375);
  transform: scale(0.97521);
}

/* Credit for Button Shape + Shadow https://codepen.io/tmrDevelops/pen/VeRvKX */

/* Rain CSS */


.rain {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#WeatherWrapper>.rain {
  /* Scrollbar fix for rain */
  overflow: hidden;
}

.rain.back-row {
  display: none;
  z-index: 1;
  bottom: 60px;
  opacity: 0.5;
}

.drop {
  position: absolute;
  bottom: 100%;
  width: 15px;
  height: 120px;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
}

@keyframes drop {
  0% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(100vh);
  }
  100% {
    transform: translateY(100vh);
  }
}

.stem {
  width: 1px;
  height: 60%;
  margin-left: 7px;
  background: linear-gradient(to bottom, rgba(200, 200, 255, 0), rgba(200, 200, 255, 0.25));
  animation: stem 0.5s linear infinite;
}

@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.splat {
  width: 15px;
  height: 10px;
  border-top: 2px dotted rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 1;
  transform: scale(0);
  animation: splat 0.5s linear infinite;
}

#WeatherWrapper>.splat {
  display: block;
}

@keyframes splat {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  80% {
    opacity: 1;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
  }
  90% {
    opacity: 0.5;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

#WeatherWrapper.single-toggle .drop {
  display: none;
}

#WeatherWrapper.single-toggle .drop:nth-child(10) {
  display: block;
}

</style>