<style>
#notesStore {
  /* Hintergrundfarbe Notizzettel */
  --FarbeNotiz: #ffffff;
  
  /* Schriftfarbe Notizzettel */
  --FarbeSchrift: #000000;
  
  /* Linksbündig */
  /* margin-left: 5%; float:left; */
    
  /* Zentriert */
  left: calc(50%); position:relative; transform: translate(-50%); float:left;
    
  /* Rechtsbündig */
  /* margin-right: 5%; float:right; */
    
  /* Notizzettel - Maximale Breite */
  max-width:90%;
 
  /* Abstand nach unten */
  margin-bottom: 30px;
}
 
#notesStore .notesHeader {background: var(--FarbeNotiz); filter: brightness(0.7); color: var(--FarbeSchrift); font: bold 14px Arial, sans-serif; text-align: left; border-radius: 4px 40px 0px 0px !important; padding: 10px 5px 5px 30px; margin-top:30px;}
#notesStore .notesContent, #notesStore #buttonDelete div {14px Arial, sans-serif; border: 1px solid #aaaaaa; border-radius:5px; }
#notesStore .notesContent {background: var(--FarbeNotiz); color: var(--FarbeSchrift); border-radius: 0px 0px 4px 40px; }
#notesStore #editorNotes ul {padding:0; margin:0;}
#notesStore #editorNotes li {margin-left:20px;}
#notesStore #editorNotes {font: 14px Arial, sans-serif; min-height: 200px !important; text-align: left; padding:10px 10px 30px 10px; outline:none;}
#notesStore #editorNotes div {margin-left: 20px;}
#notesStore #buttonDelete {position:relative; right:25px; }
#notesStore #buttonDelete div {background: var(--FarbeNotiz); filter: brightness(0.7); color: var(--FarbeSchrift); padding: 3px 20px; cursor: pointer; outline:none; position: absolute; top: -13px; right: 0px; }
 
#notesExit {background: var(--FarbeNotiz); filter: brightness(0.8); border:1px solid #dddddd; border-radius:50px; color: var(--FarbeSchrift); font: 14px Arial, sans-serif; margin:-4px 20px 0 0; padding:1px 7px 5px 7px; cursor:pointer; outline:none; float:right; }
#notesExit:hover, #buttonDelete div:hover {filter: brightness(0.9) !important;}
 
{{template==144.start}}  
#notesStore .notesHeader {background:{{global_nav_background|rgb_lightness(95)}}; color: {{global_nav_fontcolor}}; filter: brightness(1.0);}
#notesStore .notesContent, #notesStore #buttonDelete div {border: 1px solid {{global_nav_background|rgb_lightness(85)}};}
#notesStore .notesContent {background: {{global_boxcontent_background|rgb_lightness(95)}}; color: {{global_text_fontcolor}};}
#notesStore #buttonDelete div {background:{{global_nav_background|rgb_lightness(95)}} !important; color: {{global_nav_fontcolor}}; filter: brightness(1.0);}
 
#notesExit {border:1px solid {{global_nav_background|rgb_lightness(85)}}; background: {{global_nav_background|rgb_lightness(75)}}; color: {{global_nav_fontcolor}}; filter: brightness(1.0);}
#notesExit:hover, #buttonDelete div:hover {color: {{global_link_fontcolor|rgb_lightness(85)}} !important; filter: brightness(1.0);}
{{template==144.end}}
</style>
 
<a name="anfang" style="position:absolute;top:-500px !important"></a>
 
<script>
//ToDo-Liste
document.addEventListener('DOMContentLoaded', function() {
  
{{template==177.start}}  
  //Auslösung über Navi-Leiste + Platzierung unter Navileiste
  $('.navbar-nav:first-child a:last-child').after('<a class="notesHeader nav-link" href="#"><span>ToDo</span></a>');
  $('nav.navbar').after(`
{{template==177.end}}
                      
{{template==1.start}}  
  //Auslösung über Navi-Leiste + Platzierung unter Navileiste
  $('#pagewidth #nav_n li:last').after('<li><a class="notesHeader tarea" href="#"><span>ToDo</span></a></li>');
  $('#pagewidth #nav_n').after(`
{{template==1.end}} 
                      
{{template==110.start}}  
  //Auslösung über Navi-Leiste + Platzierung unter Navileiste
  $('#pagewidth #nav_n li:last').after('<li><a class="notesHeader" href="#" style="background-image: url(https://files.homepagemodules.de/b2001010/a_721_8e6530f3.gif); background-position: left center; padding-left: 17px;"> <span>ToDo</span></a></li>');
  $('.navbar').after(`
{{template==110.end}}
                      
{{template==111.start}}  
  //Auslösung über Navi-Leiste + Platzierung unter Navileiste
  $('#pagewidth #nav_n li:last').after('<li><a class="notesHeader" href="#"><span style="padding:0px 6px">ToDo</span></a></li>');
  $('#pagewidth #nav_n ul').closest('table').after(`
{{template==111.end}}
                      
{{template==144.start}}  
  //Auslösung über Navi-Leiste + Platzierung unter Navileiste
  $('li.menu_item:last').after('<li class="menu_item" style="padding: 0px;"><a class="notesHeader" href="#"><span style="padding:0px 6px">ToDo</span></a></li>');
  $('#obere_leiste').after(`
{{template==144.end}}
 
  <div id="notesStore" style="display: none; min-width:330px;">
  <div class="notesHeader">Meine ToDo-Liste<span><div onclick="parent.location=\'#anfang\';" id="notesExit">x</div></span></div>
  <div class="notesContent">
    <div id="editorNotes" contenteditable="true" ssspellcheck="true"><ul><li></li></ul></div>
    <div id="buttonDelete" onclick="parent.location=\'#anfang\';"><div>Liste löschen</div></div>
  </div>
</div><div style="clear:both;"></div>
`);
 
  // Key-Namen für Localstorage:
  var NOTES_INFO = 'todoDataStore', NOTES_STATUS = 'notesContentStore';
  // HTML-Liste und Local-Storage:
  var EDIT_NOTES = $('#editorNotes');
  var localStorage = xobor.plugin('ToDoStoreLocal').localstorage;
  // Speichern - Mouse- ,Key-, Touch-Events 
  EDIT_NOTES.on('mouseout keyup touchstart',function(){
    localStorage.set(NOTES_INFO, $(this).html());
  });
  if (localStorage.get(NOTES_INFO)) {
    EDIT_NOTES.html(localStorage.get(NOTES_INFO));
  };
  // Button zum Löschen geklickt:
  $('#buttonDelete').find('div').click(function(){
    EDIT_NOTES.html('<ul><li></li></ul>');
    localStorage.set(NOTES_INFO, EDIT_NOTES.html());
  });
  // Startzustand prüfen und ausführen:
  if (localStorage.get(NOTES_STATUS)) {
    $('#notesStore').slideDown(1000, function(){
      localStorage.set(NOTES_STATUS, $(this).is(':visible'));
    });
  };
  // Klicken auf notesContent:
  $('.notesHeader').on('click', 'span', function(){
    $('#notesStore').stop().toggle(1000, function(){
      localStorage.set(NOTES_STATUS, $(this).is(':visible'));
    });
  });
 
});
</script>