Show favorite notes first and mark them with a star background

www/css/notecards.css

@@ -69,6 +69,19 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     min-height: 4em;
 }
 
+.notecard[data-favorite="1"] {
+    background-repeat: no-repeat;
+    background-size: 3em;
+    background-position: 1em 1em;
+}
+
+.notecard[data-favorite="1"][data-fg="FFFFFF"] {
+    background-image: url(../img/starbg_dark.svg);
+}
+.notecard[data-favorite="1"][data-fg="000000"] {
+    background-image: url(../img/starbg_light.svg);
+}
+
 .popover .list .list-button {
     color: inherit;
 }

www/img/favorite_bg.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   aria-hidden="true"
+   data-prefix="fas"
+   data-icon="star"
+   class="svg-inline--fa fa-star fa-w-18"
+   role="img"
+   viewBox="0 0 576 512"
+   version="1.1"
+   id="svg875"
+   sodipodi:docname="favorite_bg.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata881">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs879" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     id="namedview877"
+     showgrid="false"
+     inkscape:zoom="1.5039062"
+     inkscape:cx="288"
+     inkscape:cy="256"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg875" />
+  <path
+     fill="currentColor"
+     d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+     id="path873"
+     style="fill:#ffffff;fill-opacity:0.19607843" />
+</svg>

www/img/starbg_dark.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   aria-hidden="true"
+   data-prefix="fas"
+   data-icon="star"
+   class="svg-inline--fa fa-star fa-w-18"
+   role="img"
+   viewBox="0 0 576 512"
+   version="1.1"
+   id="svg875"
+   sodipodi:docname="starbg_dark.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata881">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs879" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     id="namedview877"
+     showgrid="false"
+     inkscape:zoom="1.5039062"
+     inkscape:cx="288"
+     inkscape:cy="256"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg875" />
+  <path
+     fill="currentColor"
+     d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+     id="path873"
+     style="fill:#ffffff;fill-opacity:0.19607843" />
+</svg>

www/img/starbg_light.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   aria-hidden="true"
+   data-prefix="fas"
+   data-icon="star"
+   class="svg-inline--fa fa-star fa-w-18"
+   role="img"
+   viewBox="0 0 576 512"
+   version="1.1"
+   id="svg875"
+   sodipodi:docname="starbg_light.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata881">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs879" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     id="namedview877"
+     showgrid="false"
+     inkscape:zoom="1.5039062"
+     inkscape:cx="288"
+     inkscape:cy="256"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg875" />
+  <path
+     fill="currentColor"
+     d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+     id="path873"
+     style="fill:#000000;fill-opacity:0.19607843" />
+</svg>

www/js/home.js

@@ -21,8 +21,8 @@ function loadCards(callback) {
             $(".notecard-col").remove();
             for (n in notes) {
                 var note = notes[n];
-                $("#notecards-bin").append('<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-' + note.noteid + '">'
+                $("#notecards-bin").append('<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-' + note.noteid + '" data-favorite="' + (note.favorite ? "1" : "0") + '">'
-                        + '<div class="card notecard" id="notecard-' + note.noteid + '" data-id="' + note.noteid + '" data-bg="' + note.color + '" data-fg="' + note.textcolor + '" style="background-color: #' + note.color + '; color: #' + note.textcolor + ';">'
+                        + '<div class="card notecard" id="notecard-' + note.noteid + '" data-id="' + note.noteid + '" data-favorite="' + (note.favorite ? "1" : "0") + '" data-bg="' + note.color + '" data-fg="' + note.textcolor + '" style="background-color: #' + note.color + '; color: #' + note.textcolor + ';">'
                         + '<div class="editbtn">'
                         + '<i class="material-icons">edit</i>'
                         + '</div>'
@@ -35,6 +35,12 @@ function loadCards(callback) {
             }
             var noteElements = document.getElementsByClassName("notecard-col");
             window.shuffleInstance.add(noteElements);
+            window.shuffleInstance.sort({
+                reverse: true,
+                by: function (el) {
+                    return el.getAttribute("data-favorite");
+                }
+            });
             if (typeof callback == 'function') {
                 callback();
             }
@@ -121,6 +127,8 @@ $("#app").on("click", "#colorpicker .colorpicker-color", function () {
     NOTES.set(note2);
     $("#notecard-" + noteid).data("bg", note2.color);
     $("#notecard-" + noteid).data("fg", note2.textcolor);
+    $("#notecard-" + noteid).attr("data-bg", note2.color);
+    $("#notecard-" + noteid).attr("data-fg", note2.textcolor); // For CSS starbg
     $("#notecard-" + noteid).css("background-color", "#" + note2.color);
     $("#notecard-" + noteid).css("color", "#" + note2.textcolor);
 });

www/pages/home.html

@@ -39,8 +39,8 @@
             </div>
             {{/if}}
             {{#each notecards}}
-            <div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-{{noteid}}">
+            <div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-{{noteid}}" data-favorite="{{favorite}}">
-                <div class="card notecard" id="notecard-{{noteid}}" data-id="{{noteid}}" data-bg="{{color}}" data-fg="{{textcolor}}" style="background-color: #{{color}}; color: #{{textcolor}};">
+                <div class="card notecard" id="notecard-{{noteid}}" data-id="{{noteid}}" data-favorite="{{favorite}}" data-bg="{{color}}" data-fg="{{textcolor}}" style="background-color: #{{color}}; color: #{{textcolor}};">
                     <div class="editbtn">
                         <i class="material-icons">edit</i>
                     </div>