added designs and blocked out UI

designs/Frontend.svg

@@ -0,0 +1,96 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:p="http://www.evolus.vn/Namespace/Pencil" xmlns:pencil="http://www.evolus.vn/Namespace/Pencil" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:office="urn:oasis:names:tc:opendocument:xmlns:office:1.0" xmlns:style="urn:oasis:names:tc:opendocument:xmlns:style:1.0" xmlns:text="urn:oasis:names:tc:opendocument:xmlns:text:1.0" xmlns:table="urn:oasis:names:tc:opendocument:xmlns:table:1.0" xmlns:draw="urn:oasis:names:tc:opendocument:xmlns:drawing:1.0" xmlns:fo="urn:oasis:names:tc:opendocument:xmlns:xsl-fo-compatible:1.0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:meta="urn:oasis:names:tc:opendocument:xmlns:meta:1.0" xmlns:number="urn:oasis:names:tc:opendocument:xmlns:datastyle:1.0" xmlns:svg="urn:oasis:names:tc:opendocument:xmlns:svg-compatible:1.0" xmlns:chart="urn:oasis:names:tc:opendocument:xmlns:chart:1.0" xmlns:dr3d="urn:oasis:names:tc:opendocument:xmlns:dr3d:1.0" xmlns:math="http://www.w3.org/1998/Math/MathML" xmlns:form="urn:oasis:names:tc:opendocument:xmlns:form:1.0" xmlns:script="urn:oasis:names:tc:opendocument:xmlns:script:1.0" xmlns:ooo="http://openoffice.org/2004/office" xmlns:ooow="http://openoffice.org/2004/writer" xmlns:oooc="http://openoffice.org/2004/calc" xmlns:dom="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:rpt="http://openoffice.org/2005/report" xmlns:of="urn:oasis:names:tc:opendocument:xmlns:of:1.2" xmlns:rdfa="http://docs.oasis-open.org/opendocument/meta/rdfa#" xmlns:field="urn:openoffice:names:experimental:ooo-ms-interop:xmlns:field:1.0" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:em="http://exslt.org/math" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="1280" height="720" id="exportedSVG" version="1.1" pencil:version="1.2.2" sodipodi:docname="Frontend"><g inkscape:label="MainPage" inkscape:groupmode="layer" id="layer_mainpage"><g><rect x="0" y="0" width="1280" height="720" fill="none"/><g p:type="Shape" p:def="Evolus.Sketchy.GUI:textbox" id="cc6abdf37d88408a87085577b97bba84" transform="matrix(1,0,0,1,8.000014990568616,24.000017881393944)" p:locked="true"><p:metadata><p:property name="box">1256.9999850094314,25</p:property><p:property name="disabled">false</p:property><p:property name="fillColor">#FFFFFFFF</p:property><p:property name="strokeColor">#000000FF</p:property><p:property name="strokeStyle">1|</p:property><p:property name="textContent">text</p:property><p:property name="textFont">'Comic Sans MS'|normal|normal|12px|none|0</p:property><p:property name="textColor">#000000FF</p:property><p:property name="textAlign">0,1</p:property></p:metadata>
+            <g p:name="rect" id="7e85f294683b4f2d8f39130a16054f24" transform="translate(0.5,0.5)" style="fill: rgb(255, 255, 255); fill-opacity: 1; stroke: rgb(0, 0, 0); stroke-opacity: 1; stroke-width: 1;">
+    			<path style="stroke-linejoin: round; stroke: rgb(0, 0, 0); stroke-opacity: 1; stroke-width: 1;" p:name="line1" id="ab8ed9f0a586435f888909818ba25511" transform="translate(0.5,0.5)" d="M 0 0 C 419 -1 838 -1 1256.9999850094314 0 C 1257 8 1257 17 1256.9999850094314 25 C 838 25 419 25 0 25 C 0 17 0 8 0 0 z"/>
+    		</g>
+    		<text p:name="text" id="ff6517c524a64fdaa338f9879285fe6b" transform="translate(5,18)" style="font-family: &quot;Comic Sans MS&quot;; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(0, 0, 0); fill-opacity: 1;">text</text>
+        </g><g p:type="Shape" p:def="Evolus.Sketchy.GUI:listbox" id="6b65fca213024234a986971f5284eb5e" transform="matrix(1,0,0,1,9.000060528518588,56.000043630601226)"><p:metadata><p:property name="box">1256.9999396502953,87.99995636939877</p:property><p:property name="disabled">false</p:property><p:property name="withscrollbar">true</p:property><p:property name="fillColor">#282C34FF</p:property><p:property name="strokeColor">#000000FF</p:property><p:property name="strokeStyle">1|</p:property><p:property name="contentText">MenuItem
+ 
+MenuItem*
+ *
+MenuItem</p:property><p:property name="textFont">'Comic Sans MS'|normal|normal|12px|none|0</p:property><p:property name="textColor">#FFFFFFFF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>
+            <rect rx="0" ry="0" style="fill: white; stroke: none;" p:name="bg" id="da2f52f3b3814940a89911d6b34d8764" x="0" y="0" width="1256.9999396502953" height="87.99995636939877"/>
+            <g p:name="rect" id="99d3dfc6093f4c8b9f6e6adc13dfd667" style="fill: rgb(40, 44, 52); fill-opacity: 1; stroke: rgb(0, 0, 0); stroke-opacity: 1; stroke-width: 1;">
+                <path style="stroke-linejoin: round; stroke: rgb(0, 0, 0); stroke-opacity: 1; stroke-width: 1;" p:name="line1" id="aa744ec07f974a419403c4e7e9053f1a" d="M 0 0 C 419 0 838 0 1256.9999396502953 0 C 1257 29 1257 59 1256.9999396502953 87.99995636939877 C 838 88 419 88 0 87.99995636939877 C 0 59 0 29 0 0 z"/>
+            </g>
+            <foreignObject p:name="content" id="35f8a60986654937a174ca81831f51bd" x="1" y="1" width="1254.9999396502953" height="86.99995636939877">
+                <div xmlns="http://www.w3.org/1999/xhtml" p:name="div" id="c68bc1072edc41df9ec0c4725626977e" style="font-family: &quot;Comic Sans MS&quot;; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(255, 255, 255);"><div style="height: 20px; line-height: 20px; padding: 0px 5px">MenuItem</div><div style="height: 20px; line-height: 20px; padding: 0px 5px"> </div><div style="height: 20px; line-height: 20px; padding: 0px 5px; background: #23272E">MenuItem</div><div style="height: 20px; line-height: 20px; padding: 0px 5px; background: #23272E"> </div><div style="height: 20px; line-height: 20px; padding: 0px 5px">MenuItem</div></div>
+            </foreignObject>
+            <g style="fill: rgb(40, 44, 52); visibility: visible; fill-opacity: 1; stroke: rgb(0, 0, 0); stroke-opacity: 1; stroke-width: 1;" p:name="scrollbar" id="4d69db59686c4c81a741c1f809a5420a">
+                <path style="stroke-linejoin: round;" p:name="line2" id="121020ff85b3441a8051fb101b9302ad" d="M 1242.9999396502953 0 C 1243 29 1243 59 1242.9999396502953 87.99995636939877 C 1248 88 1252 88 1256.9999396502953 87.99995636939877 C 1256 59 1256 29 1256.9999396502953 0 z M 1244.9999396502953 53.99997818469939 C 1248 54 1250 54 1252.9999396502953 53.99997818469939 M 1244.9999396502953 43.99997818469939 C 1248 44 1250 44 1252.9999396502953 43.99997818469939 M 1244.9999396502953 33.99997818469939 C 1248 34 1250 34 1252.9999396502953 33.99997818469939 M 1244.9999396502953 10 C 1247 8 1248 7 1249.9999396502953 5 C 1251 7 1252 8 1252.9999396502953 10 M 1244.9999396502953 77.99995636939877 C 1247 80 1248 81 1249.9999396502953 82.99995636939877 C 1251 81 1252 80 1252.9999396502953 77.99995636939877"/>
+            </g>
+        </g><g p:type="Shape" p:def="Evolus.Sketchy.GUI:box" id="b23084c8a9f649fcb1d2a5323cbde0be" transform="matrix(1,0,0,1,9.000014573336102,151.99999952316415)" p:sizing-x-policy="start" p:sizing-y-policy="end" p:sizing-w-policy="start-end" p:sizing-h-policy="relative" p:locked="true"><p:metadata><p:property name="box">1254.999985426664,552</p:property><p:property name="textPadding">62.749999271333195,36.8</p:property><p:property name="fillColor">#000000FF</p:property><p:property name="strokeColor">#000000FF</p:property><p:property name="strokeStyle">1|</p:property><p:property name="textContent"/><p:property name="textFont">'Comic Sans MS'|normal|normal|12px|none|0</p:property><p:property name="textColor">#FFFFFFFF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>
+            <path style="stroke-linejoin: round; fill: rgb(0, 0, 0); fill-opacity: 1; stroke: rgb(0, 0, 0); stroke-opacity: 1; stroke-width: 1;" p:name="line1" id="996c4d673b01436292bbce9055a72363" transform="translate(0.5,0.5)" d="M 0 0 C 418 -2 837 -2 1254.999985426664 0 C 1255 184 1255 368 1254.999985426664 552 C 837 551 418 551 0 552 C 1 368 1 184 0 0 z"/>
+            <text p:name="text" id="378609b9b8094da99e6b68b325d1cf8b" transform="translate(627,276)" style="font-family: &quot;Comic Sans MS&quot;; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(255, 255, 255); fill-opacity: 1;"/>
+        </g><g p:type="Shape" p:def="Evolus.BasicWebElements:heading" p:sc="Heading 2" id="23627370be084ddfbd7e14440f023e94" transform="matrix(1,0,0,1,22.99999743700016,168.00000500679016)" p:sizing-x-policy="start" p:sizing-y-policy="relative" p:sizing-w-policy="relative" p:sizing-h-policy="relative"><p:metadata><p:property name="textContent">Note Title</p:property><p:property name="textFont">"Liberation Sans",Arial,sans-serif|bold|normal|20px|none|0</p:property><p:property name="textColor">#FFFFFFFF</p:property><p:property name="customStyle"/></p:metadata>
+
+            <foreignObject x="0" y="0" width="91" height="28" p:name="htmlObject" id="1b411cbdb6184585a8ee6bf80faf0c9b" style="color: rgb(255, 255, 255); font-family: &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 20px; font-weight: bold; font-style: normal; text-decoration: none;">
+                <div xmlns="http://www.w3.org/1999/xhtml" p:name="textDiv" id="c653d1cf6c2840ac91bcf6d49b78b56e" style="white-space: nowrap; display: inline-block !important"><div>Note Title</div></div>
+            </foreignObject>
+        </g><g p:type="Shape" p:def="Evolus.Common:RichTextBoxV2" p:sc="HTML Texts" id="07ea6ea8c02347c2aeef18c53430e6eb" transform="matrix(1,0,0,1,22.000004529953117,240.0000528991236)" p:sizing-x-policy="start" p:sizing-y-policy="start" p:sizing-w-policy="relative" p:sizing-h-policy="relative"><p:metadata><p:property name="width">1232,0</p:property><p:property name="fixedWidth">true</p:property><p:property name="textContent">&lt;div xmlns="http://www.w3.org/1999/xhtml" style="font-size: 1em;"&gt;This is some fancy text&lt;br /&gt;&lt;br /&gt;&lt;ul&gt;&lt;li&gt;&lt;span xmlns="http://www.w3.org/1999/xhtml" style="font-size: 1em;"&gt;Here is a bullet&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span xmlns="http://www.w3.org/1999/xhtml" style="font-size: 1em;"&gt;And Another &lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span xmlns="http://www.w3.org/1999/xhtml" style="font-size: 1em;"&gt;And one more for feeling&lt;br /&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;</p:property><p:property name="textFont">"Liberation Sans",Arial,sans-serif|normal|normal|13px|none|0</p:property><p:property name="textColor">#FFFFFFFF</p:property><p:property name="customStyle">
+                </p:property></p:metadata>
+
+            <foreignObject x="0" y="0" width="1232" height="134" p:name="htmlObject" id="84372b69e19d4fb5be414b3e9e113eb4" style="color: rgb(255, 255, 255); font-family: &quot;Liberation Sans&quot;, Arial, sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
+                <div xmlns="http://www.w3.org/1999/xhtml" p:name="textDiv" id="c1de5b7ace034fba9c70dd704e0c6091" style="display: inline-block; width: 1232px; text-decoration: none;"><div><div style="font-size: 1em;">This is some fancy text<br /><br /><ul><li><span style="font-size: 1em;">Here is a bullet</span></li><li><span style="font-size: 1em;">And Another </span></li><li><span style="font-size: 1em;">And one more for feeling<br /></span></li></ul><div><br /></div></div></div></div>
+            </foreignObject>
+        </g><g p:type="Shape" p:def="Evolus.iOS:largeButton" p:sc="Large Grey Button" id="e6a7e18eef8643c9b3011c8991a985be" transform="matrix(1,0,0,1,-343.99997970461754,405.0000425875196)"><p:metadata><p:property name="box">278,45</p:property><p:property name="type">darkGrey</p:property><p:property name="disabled">false</p:property><p:property name="title">Button</p:property><p:property name="textFont">Helvetica|bold|normal|20px|none|0</p:property></p:metadata>
+            <g p:name="bg" id="9f44e26ab13f4c89a1769a7b5a96af44"><image x="0" y="0" width="14" height="12" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAABhElEQVQokY3N3StDcQDG8V8pLlytxTg7HJtm89IkdpqdZptjZzvSbCwyL1HTME57aY5pm7c1RFJKKEpNyv4VN8qdazdS/AUeF0SSzVOfy28PIcVXqVAqJ1Qq6qaGoh9qqbo3Nc1ATTP4KyivqlJJlLrhSadvRXsHC5PZim7OAYuVh8XK/w4VCkVbLV1/b2gxgu22wc6L4AUPnG4vBNH35UdUXU1xjEb30slysPP9cLq9GBmbRmY9h+PTc1xcXiF/XUD+uvAdKpWUQduofzVzDvS5PBAH/Mhu7+P0/BKZrV3E5DSkeBLhqIxwRP4KyzTapjuzxYE+1yC8wwEcHp0gtZHDQmQZ81LiF0IIIXS9ZrbTZAEvfDztHRwhJqcRWoz9iRBCKvTNxkd7rwhB9CGZ2kRMTiM4HymKMIx2iDX3wOkehM8/jrXsDmZCSyURQ7PxzPb5FpbimA1HMRVcKIkYO9hbXvBAEH2IJlYxPjOHwHSoJNJl4p6dbi94wQMpvoLRyeC/vAPcUxVsdB+1uQAAAABJRU5ErkJggg=="/><image x="14" y="0" width="250" height="12" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAMCAYAAABIvGxUAAAAZUlEQVQImQXBTQaAUBiG0XcfRfuIRnFp2CiiFB+f258r0oaiQYt8OkdZXpDlBSqrmrKqUWhaQtOi5/143g+t6WZNN4rHRTwu5NuJbyeymLCY0Ow7s+9otIXRFtRPTj856gajG4wfWkgzKTKeXMoAAAAASUVORK5CYII="/><image x="264" y="0" width="14" height="12" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAABlUlEQVQokY3N3UtTARzG8d+VRCAITudedLrQXBYnYR07nsy54znujFjnkCQqlsJi6XLsBTsZTq3EiiKIItiFgWF4If05URf9BdGVdO23KwV7cT3wufzySCgcIRSOEAi2H7QFw99aWgOfmptbbotIo5y0wSGDwSEDTU9y6fJVlH6Vnt7zhMKRHz5foCQip/4aWrbLITPlMGplSBhpBrQEsXMKwVDka1NTq/JHuLO7x87uHu+3P/KutsXq+iY3J2cxUw4JI01c1emK9uz7fG0jx8J80SNf8ihUlil7VVafPKe2tc3G05fY18YZHcug6SNEu2M//X7/haNwvrDE7xaK91l5tMnrtzWcG1OYY9fR9CRd0bNfRKRBRERy98r8S9mr8uLVm6PnuKrT0XFmUUREsvNFTlL2qiyvPMayXRJGmt4+5btI8LTM5RapZ23jGe74NGbKQdWG6ezsnpRb2QXquZMvkS9UsGyX4aRNrE/5IFOzOeqZnrtLaekhlu1iWBku9qufZWImy/8oVB5gWBnMlEN84Mr+L0lzFif9XiKKAAAAAElFTkSuQmCC"/><image x="0" y="12" width="14" height="21" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAVCAYAAAB2Wd+JAAAA2ElEQVQ4ja3Ry26CUBhFYd7HqvVSK+IFDhTkFg8eDIqXlMZo0rSDvr2z3VmTP53sGAffcI2WNbLdWxhreEGKy9cPTN1QLNvxbmFcwPUTNNdv6OpEsWxH/YXH8ycyU1NEuG+uiHVFEeH2dEaYlxQRbvYfUElBEeF6945FtKKIUFdHzIKMIsK8PGCiEooIU1Nj7C4pInzLDHpjjyJCL1qh1XcoIlSRxtNgSnlM6C812sMZRYZxgc7LnCLCIFmjO1pQ5I7U4PnVpfwL7/oYZSX6tqLIMN9gMPEpvxxoCnqbO+PlAAAAAElFTkSuQmCC"/><image x="14" y="12" width="250" height="21" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAVCAYAAABsZT8HAAAAk0lEQVQImU3MSw6CMABF0bcfRaEVQeRTi1EgGDCYkHRgwv4XcZ06O6OjJWwsYUPz+mVev2hcAuMSUD+v9POKHq8Pj9cH+eGNH96oeU40zwlV95HqPqLCDxR+QLnryF2HkvxGkt/QzlzZmSva25K9Lf8QnSqiU4UOac0hrdHx3HA8NyjOHHHm/h5z8ZiLR7ZosUXLDyXXSblNIn32AAAAAElFTkSuQmCC"/><image x="264" y="12" width="14" height="21" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAVCAYAAAB2Wd+JAAAA30lEQVQ4ja3US0/CUBiE4f4fxQuo0EJte07pobfQckqqRYg1RBKjC/9/wrgjfqwmxsWzfFeTjGO7Hoz3z29EcY4krTF2g6NTtTsw+sMXQp0hSWu4MwWnsB0Y2/3HKfR8DSetWjA2/UGGSdmA8bTby1BlNRjrzZsMA7MEY/X8KkM/LsCo2q0MPZWBUTYvMpyECzBy28nwdhKBMS+sDC+GUzAis5Th5WgGhjLVP4WDOx8MvTgLr+4fwdBpLcPrhwCMOFvJ8GYcgjHP7R93PA+HrgLDFI0MR54Gw5Tr39dx/AFNxAtX5HsgIwAAAABJRU5ErkJggg=="/><image x="0" y="33" width="14" height="12" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAABPElEQVQokY3RS0rDUBTG8QOii1CslbbSkmLVSB953uS+cpM0zW1xGQ5cjLgooRPXIAh15AY+B1pRrLYf/IZ/zuDQOEhWylgwniOb3uDaFzuhsceWytRIeAFdLjAM5E5oPGEPMquRyimYyDEK1U5oOAxKrirIrMbIixHLCpM424qI3P0ozZ6VsfACjiBWCNJiKyIi8kJxK7MaQs/QH7iIRIFIVv+iz+0xkT8qYxElGbrOABEvkOj6T+uQPC9tcVm9KmPhRwLtsx5GfgJu5hvR94WhvuK6Wn1d7p2j1eniwvXARAlu5hD5AiJf/AyJiBjTba6rpTIWQleY+Cmc/iWapx0cHjVw3GjipNn6HRIRua67n6jpndCzF2UsPv5cgvEcIdMIIrk5XM9xnINEFFpks3up6ydl6jdlLJSxeAdcCvIyrc1fCwAAAABJRU5ErkJggg=="/><image x="14" y="33" width="250" height="12" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAMCAYAAABIvGxUAAAAXUlEQVQImQXBCw5AMBRFwbsTElsQIp4K7SslEZ/9r+WYUTsm2jGhzpzOHPVTpp8yGuadYd6RrSe2nij4RfALLdvNst0olpdYXpSOj3R8qKobqrpBFhwLjnJ5yOXhB76KKhVZt6cUAAAAAElFTkSuQmCC"/><image x="264" y="33" width="14" height="12" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAABPElEQVQokY3NS07CUBjF8W/iYw0atQY0KD4DCrS0vb2Pr/eW0gdEd+JenLkmjS7COCBxA8cBkJiIyj/5DU8OdQONddjxHYTKwK6GH8hPuh0arCPNp0jUCOxq9AP5Rr2QsQ6hM0gzhrEVer58okFs8Z/YFOj5MYytoLjATT+6p6Ec4V8xwx8qsKsRS/fued42RabAX2Kd4/yyC52WMLZCEPIDERElaYXfRCpD6/QCkbBgVyNR2XOn09kgIiLlJlilFyRoHp8gCDXY1VBczAaCW7RMZ1PobArlJhA6x1XHR+OohdbJBaLELkblTAjXp+8deA3s7XvY2d2Hd3iE9tk1BoGETguwq6G5fBHfn5YNI4NQpBAqgzQ5jK3mA1t+JJw/tNvtzR8jIiJ2NeaqT5OWr4bLR8lj12y6rZWDRV8IR/N0/iXbvgAAAABJRU5ErkJggg=="/></g>
+            <text p:name="shadow" id="6ee2996a3ea641e08af8cf674886ec23" transform="translate(107,31)" style="font-family: Helvetica; font-size: 20px; font-weight: bold; font-style: normal; text-decoration: none; fill: rgb(0, 0, 0); fill-opacity: 0.466667;">Button</text>
+            <text p:name="text" id="a3b00b3d3d8e4c6c931b617dd4e5ff4f" transform="translate(107,30)" style="font-family: Helvetica; font-size: 20px; font-weight: bold; font-style: normal; text-decoration: none; fill: rgb(255, 255, 255); fill-opacity: 1;">Button</text>
+        </g><g p:type="Shape" p:def="Evolus.Common:RoundedRectV2" id="e0f24011507040dab204c421c6c61a96" transform="matrix(1,0,0,1,14.000062406064956,117.00000351667404)"><p:metadata><p:property name="box">353.99993950128373,16.000051021577065</p:property><p:property name="withBlur">false</p:property><p:property name="radius">2.2405062321763753,0</p:property><p:property name="textPadding">0,2.000006377697133</p:property><p:property name="fillColor">#666666FF</p:property><p:property name="strokeColor">#000000FF</p:property><p:property name="strokeStyle">0|</p:property><p:property name="textContent">golang, unit testing, automation, code coverage</p:property><p:property name="textFont">Monospace|normal|normal|12px|none|0</p:property><p:property name="textColor">#FFFFFFFF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>
+
+            <defs>
+                <rect width="354" height="16.0001" rx="2.2405062321763753" ry="2.2405062321763753" x="0" y="0" style="stroke-width: 0; fill: rgb(102, 102, 102); fill-opacity: 1; stroke: rgb(0, 0, 0); stroke-opacity: 1;" p:name="rrRect" id="ef265ef56c894d29850158295fa213fd" transform="translate(0,0)"/>
+                <filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="5b2c5f9eba7a435b81a6087d3ac16e70">
+                    <feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
+                </filter>
+                <clipPath p:name="textClipPath" id="d621a1b7a48f4f6290d0729b278c25fd">
+                    <rect p:name="textClipPathRect" id="8d267287520c47f48f3ab2c554291f0a" x="2.000006377697133" y="2.000006377697133" width="349.99992674588947" height="12.000038266182798"/>
+                </clipPath>
+            </defs>
+            <use xlink:href="#ef265ef56c894d29850158295fa213fd" transform="translate(2, 2)" p:filter="url(#5b2c5f9eba7a435b81a6087d3ac16e70)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="46401a5b14e747a3b11571052221e05a"/>
+            <use xlink:href="#ef265ef56c894d29850158295fa213fd"/>
+            <g clip-path="url(#d621a1b7a48f4f6290d0729b278c25fd)" p:name="text" id="f457342eae5341e9a6526b1cee2c026a" dominant-baseline="auto" style="font-family: monospace; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(255, 255, 255); fill-opacity: 1; color: rgb(255, 255, 255);"><g transform="translate(0,-1)"><text><tspan x="8" y="12" style="font-family: monospace; font-size: 12px; font-weight: 400; font-style: normal; text-decoration: none solid rgb(255, 255, 255); text-transform: none; line-height: 0px; fill: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0);">golang, unit testing, automation, code coverage</tspan></text></g></g>
+        </g><g p:type="Shape" p:def="Evolus.Common:RoundedRect" id="4d54f78b46674193bf750e8ec612c200" transform="matrix(1,0,0,1,14.000028103590807,76.0000022649765)" p:locked="true"><p:metadata><p:property name="box">53.99997189640919,18.000042110682216</p:property><p:property name="withBlur">false</p:property><p:property name="radius">8.639995503425471,0</p:property><p:property name="textPadding">0,2.250005263835277</p:property><p:property name="fillColor">#282C34FF</p:property><p:property name="strokeColor">#666666FF</p:property><p:property name="strokeStyle">1|</p:property><p:property name="textContent">golang</p:property><p:property name="textFont">Monospace|normal|normal|10px|none|0</p:property><p:property name="textColor">#FFFFFFFF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>
+
+            <defs>
+                <rect width="53" height="17" rx="8.639995503425471" ry="8.639995503425471" x="0" y="0" style="stroke-width: 1; fill: rgb(40, 44, 52); fill-opacity: 1; stroke: rgb(102, 102, 102); stroke-opacity: 1;" p:name="rrRect" id="ede3828a96f94cdf9533cac7a8f67ca9" transform="translate(0.5,0.5)"/>
+                <filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="247ba8b7260e4411af06fc3627b3083a">
+                    <feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
+                </filter>
+            </defs>
+            <use xlink:href="#ede3828a96f94cdf9533cac7a8f67ca9" transform="translate(2, 2)" p:filter="url(#247ba8b7260e4411af06fc3627b3083a)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="0509a06519af40aaa2a1582a97d32ad9"/>
+            <use xlink:href="#ede3828a96f94cdf9533cac7a8f67ca9"/>
+            <foreignObject x="2.25001" y="2" width="49.5" height="14" p:name="text" id="73227c234dca4b84b2fff91b2f614ad1" style="font-family: monospace; font-size: 10px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(255, 255, 255); fill-opacity: 1; color: rgb(255, 255, 255); text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml">golang</div></foreignObject>
+        </g><g p:type="Shape" p:def="Evolus.Common:RoundedRect" id="ff6884aed6a347799b84d388546bc5d1" transform="matrix(1,0,0,1,78.00002807378849,76.0000022649765)" p:locked="true"><p:metadata><p:property name="box">65.99996715783982,18.000042110682216</p:property><p:property name="withBlur">false</p:property><p:property name="radius">10.559994745254372,0</p:property><p:property name="textPadding">0,2.250005263835277</p:property><p:property name="fillColor">#282C34FF</p:property><p:property name="strokeColor">#666666FF</p:property><p:property name="strokeStyle">1|</p:property><p:property name="textContent">coverage</p:property><p:property name="textFont">Monospace|normal|normal|10px|none|0</p:property><p:property name="textColor">#FFFFFFFF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>
+
+            <defs>
+                <rect width="65" height="17" rx="10.559994745254372" ry="10.559994745254372" x="0" y="0" style="stroke-width: 1; fill: rgb(40, 44, 52); fill-opacity: 1; stroke: rgb(102, 102, 102); stroke-opacity: 1;" p:name="rrRect" id="8e1cce29ee9a43fca069bcefa63209a6" transform="translate(0.5,0.5)"/>
+                <filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="78469d217b704500a3a16a65bf038026">
+                    <feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
+                </filter>
+            </defs>
+            <use xlink:href="#8e1cce29ee9a43fca069bcefa63209a6" transform="translate(2, 2)" p:filter="url(#78469d217b704500a3a16a65bf038026)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="0bca02d1bf8d4827ab00ebc6574d4230"/>
+            <use xlink:href="#8e1cce29ee9a43fca069bcefa63209a6"/>
+            <foreignObject x="2.25001" y="2" width="61.5" height="14" p:name="text" id="f45f0cc06d56450b83868d8fd742ae8b" style="font-family: monospace; font-size: 10px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(255, 255, 255); fill-opacity: 1; color: rgb(255, 255, 255); text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml">coverage</div></foreignObject>
+        </g><g p:type="Shape" p:def="Evolus.Common:RoundedRect" id="7230d63ad7bd4b5ebc5b6ca6bfb98797" transform="matrix(1,0,0,1,154.000035136939,76.0000022649765)" p:locked="true"><p:metadata><p:property name="box">93.99996489286332,18.000042110682216</p:property><p:property name="withBlur">false</p:property><p:property name="radius">7.673469392124288,0</p:property><p:property name="textPadding">0,2.250005263835277</p:property><p:property name="fillColor">#282C34FF</p:property><p:property name="strokeColor">#666666FF</p:property><p:property name="strokeStyle">1|</p:property><p:property name="textContent">unit testing</p:property><p:property name="textFont">Monospace|normal|normal|10px|none|0</p:property><p:property name="textColor">#FFFFFFFF</p:property><p:property name="textAlign">1,1</p:property></p:metadata>
+
+            <defs>
+                <rect width="93" height="17" rx="7.673469392124288" ry="7.673469392124288" x="0" y="0" style="stroke-width: 1; fill: rgb(40, 44, 52); fill-opacity: 1; stroke: rgb(102, 102, 102); stroke-opacity: 1;" p:name="rrRect" id="b4cb2c8850324e4c95e24428133004bf" transform="translate(0.5,0.5)"/>
+                <filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="c49ecdbfa6f042a187010835a1bf2d6f">
+                    <feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
+                </filter>
+            </defs>
+            <use xlink:href="#b4cb2c8850324e4c95e24428133004bf" transform="translate(2, 2)" p:filter="url(#c49ecdbfa6f042a187010835a1bf2d6f)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="a4905dec35314eecb166138160b3b4d6"/>
+            <use xlink:href="#b4cb2c8850324e4c95e24428133004bf"/>
+            <foreignObject x="2.25001" y="2" width="89.5" height="14" p:name="text" id="ed2f4b1612814ae592a8c51f01ef636d" style="font-family: monospace; font-size: 10px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(255, 255, 255); fill-opacity: 1; color: rgb(255, 255, 255); text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml">unit testing</div></foreignObject>
+        </g><g p:type="Shape" p:def="nz.nwatson.MaterialIcons:close" id="3e286d8360e9460da9b7ce3a5e2cd29a" transform="matrix(1,0,0,1,1220,65)"><p:metadata><p:property name="box">20,20</p:property><p:property name="fillColor">#FFFFFFFF</p:property></p:metadata>
+      <rect style="fill: #000000; fill-opacity: 0; stroke: none;" x="0" y="0" p:name="bgRect" id="29d97eea047c4c38adbb5138edd19c0e" height="20" width="20"/>
+      <g p:name="icon" id="27828f989b2c495aa78ab9b94cd65533" transform="scale(0.8333333333333334,0.8333333333333334)" style="fill: rgb(255, 255, 255); fill-opacity: 1;">
+        <path stroke-linejoin="round" d="M 19,6.41L 17.59,5L 12,10.59L 6.41,5L 5,6.41L 10.59,12L 5,17.59L 6.41,19L 12,13.41L 17.59,19L 19,17.59L 13.41,12L 19,6.41 Z "/>
+      </g>
+    </g><g p:type="Shape" p:def="nz.nwatson.MaterialIcons:trash" id="ca66d4a4af0b4d6386aae63c57ece8bb" transform="matrix(1,0,0,1,1220.0000363588333,106.00000312924385)"><p:metadata><p:property name="box">20,20</p:property><p:property name="fillColor">#FFFFFFFF</p:property></p:metadata>
+      <rect style="fill: #000000; fill-opacity: 0; stroke: none;" x="0" y="0" p:name="bgRect" id="2fd26151ebe34f20b6c505f4117341c3" height="20" width="20"/>
+      <g p:name="icon" id="b95575c1e84e43829565e1c112dceb92" transform="scale(0.8333333333333334,0.8333333333333334)" style="fill: rgb(255, 255, 255); fill-opacity: 1;">
+        <path stroke-width="0.2" stroke-linejoin="round" d="M 7.99991,21.0001C 6.89534,21.0001 5.99991,20.1047 5.99991,19.0001L 6,7L 18,7L 17.9999,19.0001C 17.9999,20.1047 17.1045,21.0001 15.9999,21.0001L 7.99991,21.0001 Z M 4.99995,6.00003L 4.99995,4.00005L 8.49995,4.00005L 9.49995,3.00005L 14.5,3L 15.5,4L 19,4.00005L 18.9999,6.00004L 4.99995,6.00003 Z "/>
+      </g>
+    </g></g></g></svg>

frontend/src/App.css

@@ -1,38 +1,45 @@
 .App {
-  text-align: center;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    background-color: #282c34;
+    color: white;
+    width: 100%;
+    padding: 10px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.notearea {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.NoteList {
+    height: 25%;
+    list-style-type: none;
+    border-color: black;
+    border-width: 2px;
+    border-style: groove;
+    padding: 10px;
+    margin: 0;
+    text-align: left;
+    overflow-y: scroll;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.NoteList li:hover {
+    cursor: pointer;
 }
 
-.App-link {
-  color: #61dafb;
+.NoteList li:nth-child(even) {
+    background-color: #222222;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.Omnibar {
+    width: 100%;
+    display: flex;
+}
+
+.Omnibar input {
+    padding: 2px 10px;
+    flex-grow: 1;
 }

frontend/src/App.js

@@ -1,26 +1,68 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { PureComponent } from "react";
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+import NoteList from "./components/NoteList";
+import NoteContent from "./components/NoteContent";
+import Omnibar from "./components/Omnibar";
+
+import "./App.css";
+import { createNote } from "./state";
+
+class App extends PureComponent {
+    state = { notes: [], selectedNote: null };
+
+    handleSearch = text => {
+        const { notes } = this.state;
+        const newNote = createNote({
+            title: text,
+            content: "this is a new note",
+            tags: []
+        });
+
+        this.setState({
+            notes: notes.concat(newNote)
+        });
+    };
+
+    handleSelectNote = noteTitle => {
+        const { notes } = this.state;
+        const sn = notes.filter(({ title }) => title === noteTitle);
+        if (sn.length > 0) {
+            this.setState({ selectedNote: sn[0] });
+        }
+    };
+
+    handleSaveNoteContent = content => {
+        const { notes, selectedNote } = this.state;
+        const idx = notes.findIndex(
+            ({ title }) => title === selectedNote.title
+        );
+
+        if (idx >= 0) {
+            notes[idx].content = content;
+            this.setState({
+                notes: [...notes],
+                selectedNote: { ...notes[idx] }
+            });
+            console.log("updated note", selectedNote.title, "content");
+        }
+    };
+
+    render() {
+        const { notes, selectedNote } = this.state;
+
+        return (
+            <div className="App">
+                <Omnibar onEnter={this.handleSearch} />
+                <section className="notearea">
+                    <NoteList notes={notes} onSelect={this.handleSelectNote} />
+                    <NoteContent
+                        note={selectedNote}
+                        onSave={this.handleSaveNoteContent}
+                    />
+                </section>
+            </div>
+        );
+    }
 }
 
 export default App;

frontend/src/components/EditableNoteArea.css

@@ -0,0 +1,8 @@
+.EditableNoteArea pre {
+    margin: 0;
+    padding: 0;
+}
+
+.EditableNoteArea textarea {
+    width: 100%;
+}

frontend/src/components/EditableNoteArea.js

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import { noop } from "../state";
+import "./EditableNoteArea.css";
+
+export default function EditableNoteArea({ content = null, onSave = noop }) {
+    const [state, setState] = useState({
+        editMode: false,
+        newContent: content
+    });
+
+    const { editMode, newContent } = state;
+
+    const toggleEditMode = () => {
+        setState({ editMode: !editMode });
+        if (editMode) {
+            onSave(newContent);
+        }
+    };
+
+    const updateContent = ({ target }) =>
+        setState({ newContent: target.value, editMode: editMode });
+
+    return (
+        <section className="EditableNoteArea" onDoubleClick={toggleEditMode}>
+            {editMode ? (
+                <textarea
+                    defaultValue={content}
+                    onChange={updateContent}
+                ></textarea>
+            ) : (
+                <pre>{content}</pre>
+            )}
+        </section>
+    );
+}

frontend/src/components/NoteContent.css

@@ -0,0 +1,9 @@
+.NoteContent {
+    height: 80%;
+    background-color: black;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    text-align: left;
+    padding: 0 10px;
+}

frontend/src/components/NoteContent.js

@@ -0,0 +1,17 @@
+import React from "react";
+import EditableNoteArea from "./EditableNoteArea";
+import "./NoteContent.css";
+import { noop } from "../state";
+
+export default function NoteContent({ note = null, onSave = noop }) {
+    const { content, title } = note || {};
+
+    return (
+        <div className="NoteContent">
+            <header>
+                <h2>{title}</h2>
+            </header>
+            <EditableNoteArea content={content} onSave={onSave} />
+        </div>
+    );
+}

frontend/src/components/NoteList.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { noop } from "../state.js";
+
+export default function NoteList({ notes = [], onSelect = noop }) {
+    return (
+        <ul className="NoteList">
+            {notes.map(n => (
+                <li key={n.title}>
+                    <a onClick={() => onSelect(n.title)}>
+                        <NoteListItem
+                            title={n.title}
+                            tags={n.tags}
+                            content={n.content}
+                        />
+                    </a>
+                </li>
+            ))}
+
+            {notes.length === 0 && (
+                <li>Click the text box above to create a note.</li>
+            )}
+        </ul>
+    );
+}
+
+const NoteListItem = ({ title = "empty note", tags = [], content = "" }) => (
+    <div>{title}</div>
+);

frontend/src/components/Omnibar.js

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { noop } from "../state.js";
+
+export default function Omnibar({ onType = noop, onEnter = noop }) {
+    const [text, setText] = useState({ text: "" });
+
+    const onEnterFunc = ({ charCode }) => {
+        if (charCode === 13) onEnter && onEnter(text);
+    };
+
+    return (
+        <div className="Omnibar">
+            <input
+                type="text"
+                onChange={({ target }) => setText(target.value)}
+                onKeyPress={onEnterFunc}
+            />
+        </div>
+    );
+}

frontend/src/index.css

@@ -1,13 +1,21 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    display: flex;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+        monospace;
+}
+
+#root {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
 }

frontend/src/state.js

@@ -0,0 +1,17 @@
+export const noop = () => {};
+
+export const createNote = ({ title = null, content = "", tags = [] }) => {
+    if (title === null) {
+        throw new Error("cannot create a note with a null title");
+    }
+
+    const now = new Date().toUTCString();
+    return {
+        id: now,
+        created: now,
+        lastModified: now,
+        title,
+        content,
+        tags
+    };
+};

main.go

@@ -23,13 +23,30 @@ func main() {
 
 	m := muon.New(cfg, fileHandler)
 
+	as := &AppState{
+		Settings: Settings{
+			Directory:   ".",
+			Orientation: "vertical",
+		},
+		Notes: []Note{},
+	}
+
 	m.Bind("add", add)
 
+	m.Bind("Orientation", as.GetOrientation)
+	m.Bind("LoadNotes", as.LoadNotes)
+	m.Bind("SaveNote", as.SaveNote)
+
 	if err := m.Start(); err != nil {
 		panic(err)
 	}
 }
 
+type AppState struct {
+	Settings Settings `json:"settings,omitempty"`
+	Notes    []Note   `json:"notes,omitempty"`
+}
+
 type Note struct {
 	Title        string    `json:"title,omitempty"`
 	Tags         []string  `json:"tags,omitempty"`
@@ -42,22 +59,27 @@ type Settings struct {
 	Orientation string `json:"orientation,omitempty"`
 }
 
-func LoadNotes(s Settings) ([]Note, error) {
-	return nil, nil
+func (as *AppState) LoadNotes() ([]Note, error) {
+	return as.Notes, nil
 }
 
-func SaveNote(s Settings, n Note) error {
+func (as *AppState) SaveNote(n Note) error {
+	as.Notes = append(as.Notes, n)
 	return nil
 }
 
-func DeleteNote(s Settings, n Note) error {
+func (as *AppState) DeleteNote(n Note) error {
 	return nil
 }
 
-func UpdateNote(s Settings, n Note) error {
+func (as *AppState) UpdateNote(n Note) error {
 	return nil
 }
 
+func (as *AppState) GetOrientation() string {
+	return as.Settings.Orientation
+}
+
 /*
 Notes CRUD
 Settings R/U

makefile

@@ -1,23 +1,29 @@
+APP:=xnv
 GOBIN := $(GOPATH)/bin
 PKGER_BIN := $(GOBIN)/pkger
 FRONTEND_DIR := ./frontend/build
 FRONTEND_DEPS := ./frontend/node_modules
+PLATFORMS = linux darwin windows 
+OUTPUT_DIR := .bin
 
-build: .bin/xnv
+build-all: $(OUTPUT_DIR)/linux/xnv $(OUTPUT_DIR)/windows/xnv.exe 
 
 clean: 
-	@rm -rf ./.bin ./pkged.go ./xnv $(FRONTEND_DIR)
+	@rm -rf ./$(OUTPUT_DIR) ./pkged.go ./xnv 
 
 clobber: clean
-	@rm -rf $(FRONTEND_DEPS)
+	@rm -rf $(FRONTEND_DEPS)  $(FRONTEND_DIR)
 
-.PHONY: clean clobber build
+.PHONY: clean clobber build 
 
-.bin/xnv: pkged.go .bin
-	go build -ldflags "-r ." -o .bin/xnv 
+$(OUTPUT_DIR)/xnv: pkged.go $(OUTPUT_DIR)
+	go build -ldflags "-r ." -o $(OUTPUT_DIR)/xnv 
 
-.bin:
-	mkdir -p .bin
+$(OUTPUT_DIR):
+	mkdir -p $(OUTPUT_DIR)
+
+$(OUTPUT_DIR)/%:
+	mkdir -p $@
 
 pkged.go: $(PKGER_BIN) $(FRONTEND_DIR)
 	$(PKGER_BIN) -include /frontend/build -o /
@@ -31,7 +37,31 @@ $(FRONTEND_DIR): $(FRONTEND_DEPS)
 $(FRONTEND_DEPS):
 	cd frontend && npm install
 
-.bin/ultralight-sdk-latest-win-x64.7z: .bin
+$(OUTPUT_DIR)/windows/xnv.exe: pkged.go $(OUTPUT_DIR)/windows 
+	CGO_ENABLED=1 GOOS=windows GOARCH=amd64 CC=x86_64-w64-mingw32-gcc go build -v \
+								-ldflags "-r=ultralight -H=windowsgui" -o $(OUTPUT_DIR)/windows/$(APP).exe
 	curl https://ultralight-sdk.sfo2.cdn.digitaloceanspaces.com/ultralight-sdk-latest-win-x64.7z \
-		-o .bin/ultralight-sdk-latest-win-x64.7z && \
-		7zr e -o .bin/ultralight/win-x64/ .bin/ultralight-sdk-latest-win-x64.7z
+		-o $(OUTPUT_DIR)/windows/ultralight-sdk-latest-win-x64.7z && \
+		7zr e -y -o'$(OUTPUT_DIR)/windows/' -i'!./bin/*.dll' -i'!./bin/*.so' -i'!./bin/*.lib' \
+		$(OUTPUT_DIR)/windows/ultralight-sdk-latest-win-x64.7z
+
+$(OUTPUT_DIR)/linux/xnv: pkged.go $(OUTPUT_DIR)/linux 
+	CGO_ENABLED=1 GOOS=linux GOARCH=amd64 go build -v -ldflags "-r=ultralight" -o $(OUTPUT_DIR)/linux/$(APP)
+	curl https://ultralight-sdk.sfo2.cdn.digitaloceanspaces.com/ultralight-sdk-latest-linux-x64.7z \
+		-o $(OUTPUT_DIR)/linux/ultralight-sdk-latest-linux-x64.7z && \
+		7zr e -y -o'$(OUTPUT_DIR)/linux/' -i'!./bin/*.so' \
+		$(OUTPUT_DIR)/linux/ultralight-sdk-latest-linux-x64.7z
+
+ultralight/linux:
+	mkdir -p $(OUTPUT_DIR)/linux/ultralight
+	curl https://ultralight-sdk.sfo2.cdn.digitaloceanspaces.com/ultralight-sdk-latest-linux-x64.7z \
+		-o $(OUTPUT_DIR)/linux/ultralight-sdk-latest-linux-x64.7z && \
+		7zr e -o'$(OUTPUT_DIR)/linux/ultralight' -i'!./bin/*.so' \
+		$(OUTPUT_DIR)/linux/ultralight-sdk-latest-linux-x64.7z
+
+ultralight/darwin:
+	mkdir -p $(OUTPUT_DIR)/darwin/ultralight
+	curl https://ultralight-sdk.sfo2.cdn.digitaloceanspaces.com/ultralight-sdk-latest-mac-x64.7z \
+		-o $(OUTPUT_DIR)/darwin/ultralight-sdk-latest-mac-x64.7z && \
+		7zr e -o'$(OUTPUT_DIR)/darwin/ultralight' -i'!./bin/*.so' \
+		$(OUTPUT_DIR)/darwin/ultralight-sdk-latest-mac-x64.7z