palettes proto

palettes-proto/css/fonts/piskel.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#xe600;" d="M548.568 479.997c-230.956 1.035-548.568-255.999-548.568-255.999s288.019-255.998 548.568-255.998c229.744 0 548.568 255.999 548.568 255.999s-319.896 254.974-548.568 255.999zM543.082 398.397c100.382 0 181.713-81.33 181.713-181.713s-81.331-181.713-181.713-181.713c-100.382 0-181.827 81.331-181.827 181.713s81.445 181.713 181.827 181.713zM543.197 331.312c-65.289 0-118.285-52.996-118.285-118.285s52.996-118.171 118.285-118.171c65.289 0 118.17 52.882 118.17 118.171s-52.882 118.285-118.17 118.285z" horiz-adv-x="1097" />
+<glyph unicode="&#xe601;" d="M333.139 442.196l-28.111-24.945-1.682 9.117-16.077-4.654v-31.086l1.038-22.032 30.642 27.192c-0.394-5.602-0.579-11.514-0.189-18.076 0.616-10.389 3.469-19.727 9.148-27.036s13.329-11.986 21.812-15.858c16.965-7.745 38.105-20.45 64.012-41.986 49.053-40.769 55.122-61.117 63.962-96.969 8.416-46.603-4.959-80.166-24.261-108.637-13.789-20.344-30.859-38.395-68.38-46.004s-72.657-10.067-97.784-10.067v-25.324c26.745 0 62.98 2.493 102.815 10.574s79.13 21.041 103.132 46.154c25.984 27.183 50.821 76.445 35.96 153.464l-0.063 0.253c-6.619 30.719-26.716 76.854-105.285 111.015-32.5 14.131-50.132 23.25-63.389 29.304-6.628 3.027-10.442 6.947-12.524 9.622s-3.445 5.956-3.862 12.978c-0.939 15.803 1.36 27.825 3.767 35.771s4.432 11.015 4.432 11.015l-19.12 16.209zM305.535 392.371c0 0-18.259 4.773-18.259-1.332 0-33.82-0.462-39.793 11.136-63.691s26.568-48.483 49.166-69.349c42.733-39.459 39.275-45.454 46.367-65.753 2.611-7.473 3.713-24.832 1.899-38.462s-6.896-31.623-13.579-41.846c-10.502-16.069-18.963-32.495-39.053-43.653-20.991-11.659-39.094-14.177-55.936-14.177v-25.324c21.094 0 45.108 5.082 70.464 15.322s49.766 25.601 64.546 48.212c9.899 15.147 20.321 38.209 22.622 56.641s6.87 34.332-5.148 59.162c-18.5 38.219-43.101 49.697-73.135 75.121-18.592 15.74-35.31 34.27-45.45 55.156s-15.009 42.098-15.636 53.973zM302.18 376.1l-14.906-1.362c0.757-14.293 0-43.707 0-71.637 0-13.26 2.204-29.37 4.278-40.492 3.993-21.428 10.649-35.336 14.823-48.794 3.317-10.697 7.035-25.671 9.51-31.424 6.695-15.587 7.627-34.636 0.765-56.569-6.95-22.212-17.785-43.502-35.888-50.49l6.513-21.476c26.197 10.113 62.845 38.626 72.867 70.666 9.036 28.875 3.329 54.971-4.906 74.137-4.993 11.622-9.74 19.624-15.059 29.314-6.544 11.921-20.45 26.866-24.431 39.038-3.621 11.070-7.929 24.458-9.038 38.151-2.22 27.384-3.681 55.489-4.526 70.94zM243.043 442.167l28.111-24.945 1.682 9.117 16.077-4.654v-31.086l-1.038-22.031-30.642 27.192c0.394-5.601 0.579-11.514 0.189-18.076-0.616-10.391 0.623-20.75-5.055-28.057s-12.305-17.102-20.787-20.976c-16.965-7.747-37.083-20.449-62.988-41.986-49.053-40.769-47.959-51.909-56.799-87.761-3.299-47.627-5.999-46.959 4.819-79.986 6.537-19.959 22.674-39.417 60.195-57.258 34.577-16.442 86.982-30.531 112.107-30.531v-25.324c-26.745 0-62.98 2.493-102.815 10.57s-79.129 21.041-103.132 46.154c-25.983 27.182-50.821 76.447-35.959 153.464l0.063 0.253c6.618 30.719 26.715 76.854 105.288 111.015 32.499 14.131 50.131 23.25 63.386 29.302 6.629 3.026 10.442 6.948 12.528 9.622s3.445 5.956 3.862 12.978c0.939 15.803-1.36 27.825-3.767 35.771s-4.431 11.015-4.431 11.015l19.12 16.207zM281.173 395.236l9.119-12.938c-0.757-14.293 0-43.707 0-71.637 0-13.261 3.582-30.816 1.509-41.939-3.993-21.428-3.416-28.824-7.589-42.282-3.317-10.697-7.035-29.287-9.51-35.043-6.695-15.587-8.351-51.277-1.488-73.21 6.95-22.212 11.272-50.74 22.139-67.131l4.043-41.683c-24.026 32.543-48.269 69.938-58.294 101.975-9.036 28.875-8.394 79.572-0.158 98.736 4.993 11.622 9.74 23.244 15.059 32.931 6.544 11.922 10.268 23.796 13.227 36.99 2.548 11.365 7.031 29.873 8.139 43.568 2.22 27.387 2.957 56.213 3.804 71.663z" horiz-adv-x="576" />
+<glyph unicode="&#xe602;" d="M256 384c-111.659 0-208.441-65.021-256-160 47.559-94.979 144.341-160 256-160 111.657 0 208.439 65.021 256 160-47.558 94.979-144.343 160-256 160zM382.225 299.148c30.081-19.187 55.571-44.887 74.717-75.148-19.146-30.261-44.637-55.961-74.718-75.149-37.797-24.108-81.445-36.851-126.224-36.851-44.78 0-88.428 12.743-126.225 36.852-30.080 19.186-55.57 44.886-74.717 75.148 19.146 30.262 44.637 55.962 74.717 75.148 1.959 1.25 3.938 2.461 5.929 3.65-4.979-13.664-7.704-28.411-7.704-43.798 0-70.692 57.308-128 128-128s128 57.308 128 128c0 15.387-2.725 30.134-7.704 43.799 1.99-1.189 3.969-2.401 5.929-3.651zM256 275c0-26.51-21.49-48-48-48s-48 21.49-48 48 21.49 48 48 48 48-21.49 48-48z" />
+</font></defs></svg>

palettes-proto/img/layers.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   version="1.1"
+   width="90"
+   height="87.886002"
+   id="svg3024">
+  <defs
+     id="defs3026" />
+  <metadata
+     id="metadata3029">
+    <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>
+  <g
+     transform="translate(-266.63206,-597.79217)"
+     id="layer1">
+    <g
+       transform="translate(262.14286,465.21932)"
+       id="Captions" />
+    <g
+       id="g3825" />
+    <g
+       transform="translate(-0.51079959,126.51585)"
+       id="layer1-9"
+       style="fill:#ffffff;fill-opacity:1">
+      <g
+         transform="translate(262.14286,465.21932)"
+         id="Captions-4"
+         style="fill:#ffffff;fill-opacity:1" />
+      <g
+         id="g3825-8"
+         style="fill:#ffffff;fill-opacity:1">
+        <path
+           d="m 357.14286,556.72132 c 0,1.346 -1.097,2.441 -2.442,2.441 h -60.239 c -1.347,0 -2.441,-1.096 -2.441,-2.441 v -4.555 h 50.241 c 4.346,0 7.884,-3.539 7.884,-7.885 v -48.128 h 4.555 c 1.346,0 2.442,1.096 2.442,2.441 v 58.127 z"
+           id="path2989-8"
+           style="fill:#ffffff;fill-opacity:1" />
+        <path
+           d="m 279.58086,544.28132 v -4.555 h 6.997 2.722 2.721 37.803 c 4.346,0 7.884,-3.537 7.884,-7.883 v -35.69 -2.721 -2.721 -6.998 h 4.555 c 1.346,0 2.442,1.096 2.442,2.443 v 4.555 2.721 2.721 48.129 c 0,1.346 -1.097,2.443 -2.442,2.443 h -50.242 -2.721 -2.722 -4.555 c -1.347,0 -2.442,-1.098 -2.442,-2.444 z"
+           id="path2991-2"
+           style="fill:#ffffff;fill-opacity:1" />
+        <path
+           d="m 329.82386,471.27632 h -60.239 c -1.347,0 -2.442,1.093 -2.442,2.441 v 58.127 c 0,1.344 1.095,2.441 2.442,2.441 h 4.555 2.721 2.721 6.997 2.722 2.721 37.803 c 1.345,0 2.441,-1.098 2.441,-2.441 v -35.691 -2.721 -2.721 -6.998 -2.721 -2.721 -4.554 c -10e-4,-1.348 -1.098,-2.441 -2.442,-2.441 z"
+           id="path2993-4"
+           style="fill:#ffffff;fill-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>

palettes-proto/index.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Piskel</title>
+  <meta name="description" content="">
+  <meta name="author" content="Julian Descottes">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <div
+    id="loading-mask"
+    style="
+    position:fixed;
+    top:0;right:0;bottom:0;left:0;
+    background:black;
+    opacity:1;
+    text-align:center;
+    z-index : 20000;
+    transition:opacity 0.5s;
+    color:white;">
+      <span style="top:45%">Loading Piskel ...</span>
+  </div>
+  <script type="text/javascript" src="js/lib/iframeLoader-0.1.0.js"></script>
+
+  <!-- the comment below indicates the beginning of markup reused by the editor integrated in piskelapp.com -->
+  <!-- do not delete, do not move :) -->
+  <!--body-main-start-->
+  <div id="main-wrapper" class="main-wrapper">
+    <iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+
+    <div id="column-wrapper" class="column-wrapper">
+      <div class='column left-column'>
+        <iframe src="templates/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+      </div>
+
+      <div class='column main-column'>
+        <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
+          <div class="canvas-background"></div>
+        </div>
+      </div>
+
+      <div class="column right-column">
+        <iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <div class="pull-bottom cursor-coordinates"></div>
+      </div>
+    </div>
+
+    <div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
+      <div class="sticky-section-wrap">
+        <iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <div class="drawer vertical-centerer">
+          <div class="drawer-content" id="drawer-container">
+            <iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/export.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="dialog-container-wrapper">
+    <div id="dialog-container">
+      <iframe src="templates/dialogs/create-palette.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+      <iframe src="templates/dialogs/import-image.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+      <iframe src="templates/dialogs/browse-local.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+    </div>
+  </div>
+
+  <iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+  <!--body-main-end-->
+  <!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
+  <!-- do not delete, do not move :) -->
+
+  <script type="text/javascript" src="piskel-boot-0.1.0.js"></script>
+</body>
+</html>

palettes-proto/js/lib/iframeLoader-0.1.0.js

@@ -0,0 +1,52 @@
+(function () {
+  /**
+   * Depending on the value of the data-iframe-loader attribute, display or store the content of the iframe
+   * @param  {HTMLElement} iframe
+   */
+  var processFrame = function (iframe) {
+    var type = iframe.getAttribute('data-iframe-loader');
+    if (type === "display") {
+      displayFrame(iframe);
+    } else if (type === "store") {
+      storeFrame(iframe);
+    } else {
+      console.error('iframeLoader invalid type : ' + type);
+    }
+  };
+
+  /**
+   * Replace the existing iframe with the content of the iframe
+   * If the iframe has a single root element, it will directly replace the iframe.
+   * If there are several roots, a wrapping div will be created and will replace the iframe
+   * @param  {HTMLElement} iframe
+   */
+  var displayFrame = function (iframe) {
+    var div=document.createElement("div");
+    div.innerHTML = iframe.contentWindow.document.body.innerHTML;
+    if (div.children.length == 1) {
+      div = div.children[0];
+    }
+    iframe.parentNode.replaceChild(div, iframe);
+  };
+
+  /**
+   * Load the iframe content as a <script type="text/html" id={iframe-src}>{iframe-content}</script>
+   * The content can later be accessed by getting the script (through getElementById for instance) and reading innerHTML
+   * @param  {HTMLElement} iframe
+   */
+  var storeFrame = function (iframe) {
+    var script=document.createElement("script");
+    script.setAttribute("type", "text/html");
+    script.setAttribute("id", iframe.getAttribute("src").replace(/.*templates[^\/]*\//,'templates/'));
+    script.innerHTML = iframe.contentWindow.document.body.innerHTML;
+    iframe.parentNode.removeChild(iframe);
+    document.body.appendChild(script);
+  };
+
+  window.iframeloader = {
+    onLoad : function (event) {
+      var iframe = event.target || event.srcElement;
+      processFrame(iframe);
+    }
+  };
+})();

palettes-proto/piskel-boot-0.1.0.js

@@ -0,0 +1,86 @@
+(function () {
+
+  /**
+   * See @Gruntfile.js => after build, -2014-09-07-07-04 is replaced by the build version
+   */
+  var version = '-2014-09-07-07-04';
+  var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
+  if (versionHasNotBeenReplaced)  {
+    version = '';
+  }
+
+  window.onPiskelReady = function () {
+    var loadingMask = document.getElementById('loading-mask');
+    loadingMask.style.opacity = 0;
+    window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
+    pskl.app.init();
+    // cleanup
+    delete window.pskl_exports;
+    delete window.loadDebugScripts;
+    delete window.done;
+  };
+
+  var prefixPath = function (path) {
+    if (window.pskl && window.pskl.appEngineToken_) {
+      return '../' + path;
+    } else {
+      return path;
+    }
+  };
+
+  var loadScript = function (src, callback) {
+    src = prefixPath(src);
+    var script = window.document.createElement('script');
+    script.setAttribute('src',src);
+    script.setAttribute('onload',callback);
+    window.document.body.appendChild(script);
+  };
+
+  var loadStyle = function (src) {
+    src = prefixPath(src);
+    var link = document.createElement('link');
+    link.setAttribute('href', src);
+    link.setAttribute('rel', 'stylesheet');
+    link.setAttribute('type', 'text/css');
+    document.head.appendChild(link);
+  };
+
+  if (window.location.href.indexOf('debug') != -1) {
+    window.pskl_exports = {};
+    var scriptIndex = 0;
+    window.loadNextScript = function () {
+      if (scriptIndex == window.pskl_exports.scripts.length) {
+        window.onPiskelReady();
+      } else {
+        loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()');
+        scriptIndex ++;
+      }
+    };
+    loadScript('piskel-script-list.js', 'loadNextScript()');
+
+    window.loadStyles = function () {
+      var styles = window.pskl_exports.styles;
+      for (var i = 0 ; i < styles.length ; i++) {
+        loadStyle(styles[i]);
+      }
+    };
+    loadScript('piskel-style-list.js', 'loadStyles()');
+  } else {
+    var script;
+    if (window.location.href.indexOf('pack') != -1) {
+      script = 'js/piskel-packaged' + version + '.js';
+    } else {
+      script = 'js/piskel-packaged-min' + version + '.js';
+    }
+    loadStyle('css/piskel-style-packaged' + version + '.css');
+
+    var loaderInterval = window.setInterval(function () {
+      if (document.querySelectorAll('[data-iframe-loader]').length === 0) {
+        window.clearInterval(loaderInterval);
+        loadScript(script, 'onPiskelReady()');
+      } else {
+        window.console.log('waiting for templates to load ....');
+      }
+    }, 100);
+  }
+})();

palettes-proto/piskelapp-partials/main-partial.html

@@ -0,0 +1,48 @@
+
+<div id="main-wrapper" class="main-wrapper">
+  <iframe src="../templates-2014-09-07-07-04/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+
+  <div id="column-wrapper" class="column-wrapper">
+    <div class='column left-column'>
+      <iframe src="../templates-2014-09-07-07-04/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+    </div>
+
+    <div class='column main-column'>
+      <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
+        <div class="canvas-background"></div>
+      </div>
+    </div>
+
+    <div class="column right-column">
+      <iframe src="../templates-2014-09-07-07-04/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+      <iframe src="../templates-2014-09-07-07-04/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+      <iframe src="../templates-2014-09-07-07-04/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+      <div class="pull-bottom cursor-coordinates"></div>
+    </div>
+  </div>
+
+  <div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
+    <div class="sticky-section-wrap">
+      <iframe src="../templates-2014-09-07-07-04/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+      <div class="drawer vertical-centerer">
+        <div class="drawer-content" id="drawer-container">
+          <iframe src="../templates-2014-09-07-07-04/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+          <iframe src="../templates-2014-09-07-07-04/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+          <iframe src="../templates-2014-09-07-07-04/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+          <iframe src="../templates-2014-09-07-07-04/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+          <iframe src="../templates-2014-09-07-07-04/settings/export.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div id="dialog-container-wrapper">
+  <div id="dialog-container">
+    <iframe src="../templates-2014-09-07-07-04/dialogs/create-palette.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+    <iframe src="../templates-2014-09-07-07-04/dialogs/import-image.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+    <iframe src="../templates-2014-09-07-07-04/dialogs/browse-local.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+  </div>
+</div>
+
+<iframe src="../templates-2014-09-07-07-04/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>

palettes-proto/templates/cheatsheet.html

@@ -0,0 +1,24 @@
+<div id="cheatsheet-wrapper" style="display:none">
+  <div class="cheatsheet-container">
+    <div class="cheatsheet-section">
+      <h3>Tool shortcuts</h3>
+      <ul class="cheatsheet-tool-shortcuts"></ul>
+    </div>
+    <div class="cheatsheet-section">
+      <h3>Misc shortcuts</h3>
+      <ul class="cheatsheet-misc-shortcuts"></ul>
+    </div>
+    <div class="cheatsheet-section">
+      <h3>Selection shortcuts</h3>
+      <ul class="cheatsheet-selection-shortcuts"></ul>
+    </div>
+  </div>
+</div>
+<span class="cheatsheet-link">Keyboard shortcuts</a>
+<script type="text/template" id="cheatsheet-shortcut-template">
+  <li class="cheatsheet-shortcut">
+    <div class="cheatsheet-icon {{shortcutIcon}}"></div>
+    <span class="cheatsheet-key">{{shortcutKey}}</span>
+    <span class="cheatsheet-description">{{shortcutDescription}}</span>
+  </li>
+</script>

palettes-proto/templates/dialogs/browse-local.html

@@ -0,0 +1,26 @@
+<div class="dialog-wrapper">
+  <h3 class="dialog-head">
+    Browse Local Piskels
+    <span class="dialog-close">X</span>
+  </h3>
+  <div style="padding:10px 20px; font-size:1.5em">
+    <table class="local-piskel-list">
+      <thead>
+        <tr class="local-piskel-list-head">
+          <td class="local-piskel-name">Name</td>
+          <td class="local-piskel-save-date">Date</td>
+          <td colspan=2>Actions</td>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </div>
+  <script type="text/template" id="local-storage-item-template">
+    <tr class="local-piskel-item">
+      <td class="local-piskel-name">{{name}}</td>
+      <td class="local-piskel-save-date">{{date}}</td>
+      <td><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
+      <td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
+    </tr>
+  </script>
+</div>

palettes-proto/templates/dialogs/create-palette.html

@@ -0,0 +1,82 @@
+<div class="dialog-wrapper">
+  <h3 class="dialog-head">
+    Create palette
+    <span class="dialog-close">X</span>
+  </h3>
+  <div class="dialog-create-palette" style="font-size:1.3em">
+      <div class="create-palette-section form-section">
+        <span class="create-palette-name-label">Name</span>
+        <input type="text" class="textfield create-palette-name-input" name="palette-name" placeholder="palette name ..."/>
+        <div class="create-palette-import-section">
+          <button
+            type="button"
+            rel="tooltip" data-placement="right" title="Import palette from an existing Image or from a palette file"
+            class="button  button-primary create-palette-import-button">Import from file</button>
+          <input style="display:none"
+            class="create-palette-import-input"
+            type="file" value="file" accept="*"/>
+        </div>
+      </div>
+      <div class="colors-container">
+        <ul class="colors-list"></ul>
+        <div class="color-picker-container">
+          <div class="color-picker-spectrum"></div>
+          <div class="color-picker-slider">
+            <span>H</span>
+            <input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359"/>
+            <input type="text"  data-model="hsv" data-dimension="h" class="textfield" value="0"/>
+          </div>
+          <div class="color-picker-slider">
+            <span>S</span>
+            <input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100"/>
+            <input type="text"  data-model="hsv" data-dimension="s" class="textfield" value="0"/>
+          </div>
+          <div class="color-picker-slider">
+            <span>V</span>
+            <input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100"/>
+            <input type="text"  data-model="hsv" data-dimension="v" class="textfield" value="0"/>
+          </div>
+          <br/>
+          <div class="color-picker-slider">
+            <span>R</span>
+            <input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255"/>
+            <input type="text"  data-model="rgb" data-dimension="r" class="textfield" value="0"/>
+          </div>
+          <div class="color-picker-slider">
+            <span>G</span>
+            <input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255"/>
+            <input type="text"  data-model="rgb" data-dimension="g" class="textfield" value="0"/>
+          </div>
+          <div class="color-picker-slider">
+            <span>B</span>
+            <input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255"/>
+            <input type="text"  data-model="rgb" data-dimension="b" class="textfield" value="0"/>
+          </div>
+          <div class="color-preview"></div>
+        </div>
+      </div>
+      <div class="create-palette-actions">
+        <button type="button" name="create-palette-cancel" class="button create-palette-cancel">Cancel</button>
+        <button type="button" name="create-palette-submit" class="button button-primary create-palette-submit">Save</button>
+      </div>
+  </div>
+
+  <script type="text/template" id="color-picker-slider-template">
+    <div class="color-picker-slider">
+      <span>{{dim|upper}}</span>
+      <input type="range" data-model="{{model}}" data-dimension="{{dim}}" value="0" min="0" max="{{max}}"/>
+      <input type="text"  data-model="{{model}}" data-dimension="{{dim}}" class="textfield" value="0"/>
+    </div>
+  </script>
+
+  <script type="text/template" id="create-palette-color-template">
+    <li
+      class="create-palette-color {{:selected}} {{:light-color}}"
+      style="background:{{color}}"
+      data-palette-index="{{index}}"
+      data-palette-color="{{color}}">
+      <div class="create-palette-remove-color">X</div>
+    </li>
+  </script>
+
+</div>

palettes-proto/templates/dialogs/import-image.html

@@ -0,0 +1,27 @@
+<div class="dialog-wrapper">
+  <h3 class="dialog-head">
+    Import Image
+    <span class="dialog-close">X</span>
+  </h3>
+  <div class="dialog-import-body">
+    <form action="" method="POST" name="import-image-form">
+      <div class="import-section">
+        <span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
+      </div>
+      <div class="import-section">
+        <span class="dialog-section-title" style="vertical-align:top">Info :</span>
+        <div class="import-section-preview"></div>
+      </div>
+      <div class="import-section">
+        <span class="dialog-section-title">Size :</span>
+        <input type="text" class="textfield import-size-field" name="resize-width"/>x
+        <input type="text" class="textfield import-size-field" name="resize-height"/>
+      </div>
+      <div class="import-section">
+        <span class="import-section-title">Smooth resize :</span>
+        <input type="checkbox" checked="checked" name="smooth-resize-checkbox" value="1"/>
+      </div>
+      <input type="submit" name="import-submit" class="button button-primary import-button" value="Import" />
+    </form>
+  </div>
+</div>

palettes-proto/templates/drawing-tools.html

@@ -0,0 +1,63 @@
+<div class="sticky-section left-sticky-section" id="tool-section">
+  <div class="sticky-section-wrap">
+    <div class="vertical-centerer">
+      <ul id="tools-container" class="tools-wrapper">
+        <!-- Drawing tools will be inserted here -->
+      </ul>
+      <div class="palette-wrapper">
+        <div
+          class="tool-icon tool-color-picker"
+          title="Primary - left mouse button"
+          rel="tooltip"
+          data-placement="right"
+        >
+          <input id="color-picker" class="color" type="text"/>
+        </div>
+        <div
+          class="tool-icon tool-color-picker"
+          title="Secondary - right mouse button"
+          rel="tooltip"
+          data-placement="right"
+        >
+          <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
+        </div>
+        <div
+          class="swap-colors-icon"
+          title="Swap colors (X)"
+          rel="tooltip"
+          data-placement="right"
+        ></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Templates -->
+
+  <!-- Drawing tool icon-button -->
+  <script type="text/template" id="drawing-tool-item-template">
+    <li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
+  </script>
+
+  <!-- Drawing tool tooltip container -->
+  <script type="text/template" id="drawing-tool-tooltip-container-template">
+    <div class='tools-tooltip-container'>
+      <div>{{helptext}} <span class='tools-tooltip-shortcut'>({{shortcut}})</span></div>
+      {{descriptors}}
+    </div>
+  </script>
+
+  <!-- Drawing tool tooltip line for modifier -->
+  <script type="text/template" id="drawing-tool-tooltip-descriptor-template">
+    <div class='tools-tooltip-descriptor'>
+      <span class='tools-tooltip-descriptor-button'>{{key}}</span>
+      {{description}}
+    </div>
+  </script>
+
+  <!-- Drawing tool tooltip line -->
+  <script type="text/template" id="drawing-tool-tooltip-descriptor-simple-template">
+    <div class='tools-tooltip-descriptor'>
+      {{description}}
+    </div>
+  </script>
+</div>

palettes-proto/templates/frames-list.html

@@ -0,0 +1,7 @@
+<div id="preview-list-wrapper" class="preview-list-wrapper">
+  <div id="preview-list-scroller" class="preview-list-scroller">
+    <ul class="preview-list" id="preview-list"></ul>
+  </div>
+  <div class="top-overflow"></div>
+  <div class="bottom-overflow"></div>
+</div>

palettes-proto/templates/layers-list.html

@@ -0,0 +1,20 @@
+<div class="toolbox-container layers-list-container">
+  <h3 class="toolbox-title layers-title">Layers
+    <div title="Toggle layer preview (alt+L)"
+         rel="tooltip"
+         data-placement="top"
+         class="layers-toggle-preview piskel-icon-eye"></div>
+  </h3>
+  <div class="toolbox-button-container layers-button-container">
+    <button class="button toolbox-button" data-action="add"  >Add</button>
+    <button class="button toolbox-button" data-action="delete"  >Delete</button>
+    <button class="button toolbox-button layers-button-arrow" data-action="up"   >&#8593;</button>
+    <button class="button toolbox-button layers-button-arrow" data-action="down" >&#8595;</button>
+  </div>
+  <script type="text/template" id="layer-item-template">
+    <li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}
+      <span class="action-icon edit-icon" title="edit name">&nbsp;</span>
+    </li>
+  </script>
+  <ul class="layers-list"></ul>
+</div>

palettes-proto/templates/palettes-list.html

@@ -0,0 +1,37 @@
+<div class="toolbox-container palettes-list-container">
+  <h3 class="toolbox-title palettes-title"
+      style="overflow: hidden;height: 36px;box-sizing: border-box;border-bottom: 1px solid #444;">
+    <span style="line-height:20px ">Palettes</span>
+    <div
+      class="button button-primary create-palette-button"
+      title="Create new palette"
+      rel="tooltip"
+      data-placement="top"
+      style="width:20px; height:20px; float:right; font-size:1.1em">+</div>
+  </h3>
+  <div
+    class="palette-actions"
+    style="background-color:#3f3f3f; border-bottom:#222; height:24px; padding:0 3px;">
+    <select class="palettes-list-select" style="margin:3px 0;"></select>
+    <div class="palette-action palette-action-download"
+      title="Download palette"
+      rel="tooltip"
+      data-placement="top">dl</div>
+    <div class="palette-action palette-action-delete"
+      title="Delete palette"
+      rel="tooltip"
+      data-placement="top">d</div>
+    <div class="palette-action palette-action-edit"
+      title="Edit palette"
+      rel="tooltip"
+      data-placement="top">e</div>
+  </div>
+  <div class="palettes-list-colors"></div>
+  <script type="text/template" id="palette-color-template">
+    <div class="palettes-list-color" data-color="{{color}}" title="{{color}}">
+      <div data-color="{{color}}" style="background:{{color}}"></div>
+    </div>
+  </script>
+</div>
+
+

palettes-proto/templates/preview.html

@@ -0,0 +1,13 @@
+<div id="animated-preview-container" class="preview-container">
+  <div id="animated-preview-canvas-container" class="canvas-container">
+    <div class="canvas-background"></div>
+  </div>
+  <div>
+    <div title="Toggle onion skin (alt+O)"
+         rel="tooltip"
+         data-placement="bottom"
+         class="piskel-icon-onion preview-toggle-onion-skin"></div>
+    <span id="display-fps" class="display-fps"></span>
+    <input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
+  </div>
+</div>

palettes-proto/templates/settings.html

@@ -0,0 +1,37 @@
+<div class="vertical-centerer">
+  <div
+    data-setting="user"
+    class="tool-icon gear-icon"
+    title="<span style='color:gold'>PREFERENCES</span></br>"
+    rel="tooltip" data-placement="left">
+  </div>
+
+  <div
+    data-setting="resize"
+    class="tool-icon resize-icon"
+    title="<span style='color:gold'>RESIZE</span></br>Resize the drawing area"
+    rel="tooltip" data-placement="left">
+  </div>
+
+  <div
+    data-setting="save"
+    class="tool-icon save-icon"
+    title="<span style='color:gold'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
+    rel="tooltip" data-placement="left" >
+  </div>
+
+  <div
+    data-setting="export"
+    class="tool-icon export-icon"
+    title="<span style='color:gold'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
+    rel="tooltip" data-placement="left">
+  </div>
+
+  <div
+    data-setting="import"
+    class="tool-icon local-storage-icon"
+    title="<span style='color:gold'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
+    rel="tooltip" data-placement="left">
+  </div>
+
+</div>

palettes-proto/templates/settings/application.html

@@ -0,0 +1,38 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Canvas settings:
+  </div>
+  <div class="settings-item">
+    <label>Background:</label>
+    <div id="background-picker-wrapper" class="background-picker-wrapper">
+      <div class="background-picker light-picker-background" data-background-class="light-canvas-background"
+            rel="tooltip" data-placement="bottom" title="light / high contrast">
+      </div>
+      <div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
+            rel="tooltip" data-placement="bottom" title="medium / high contrast">
+      </div>
+      <div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
+            rel="tooltip" data-placement="bottom" title="medium / low contrast">
+      </div>
+      <div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
+            rel="tooltip" data-placement="bottom" title="dark / low contrast">
+      </div>
+    </div>
+  </div>
+  <div class="settings-item">
+    <label for="grid-width">Grid :</label>
+    <select id="grid-width">
+      <option value="0">Disabled</option>
+      <option value="1">Enabled - 1px wide</option>
+      <option value="2">Enabled - 2px wide</option>
+      <option value="3">Enabled - 3px wide</option>
+      <option value="4">Enabled - 4px wide</option>
+    </select>
+  </div>
+
+  <!-- <div class="settings-item">
+    <label for="tiled-preview">Display tiled preview :</label>
+    <input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
+  </div> -->
+</div>
+

palettes-proto/templates/settings/export.html

@@ -0,0 +1,46 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Export Spritesheet
+  </div>
+  <div class="png-export-preview  settings-item"></div>
+  <div class="settings-item">
+    <span class="settings-description">PNG with all frames side by side.</span>
+    <button type="button" class="button button-primary png-download-button">Download PNG</button>
+  </div>
+  <div class="settings-title">
+    Export as ZIP
+  </div>
+  <div class="settings-item">
+    <span class="settings-description">ZIP with one PNG file per frame.</span>
+    <span class="settings-description" style="display:block">File names will start with the prefix below.</span>
+    <div class="settings-item">
+      <label for="zip-prefix-name">Prefix:</label>
+      <input id="zip-prefix-name" type="text" class="textfield" placeholder="PNG file prefix ...">
+    </div>
+    <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
+  </div>
+  <div class="settings-title">
+    Export to Animated GIF
+  </div>
+  <div class="settings-item">
+    <form action="" method="POST" class="gif-export-form">
+      <div class="settings-item">
+        <label>Select resolution:</label>
+        <select class="gif-export-select-resolution"></select>
+        <script type="text/template" id="gif-export-option-template">
+          <option value="{{value}}" {{selected}}>{{label}}</option>
+        </script>
+      </div>
+      <div class="settings-item">
+        <button type="button" class="button button-primary gif-download-button">Download GIF</button>
+        <button type="button" class="button button gif-upload-button">Get public URL</button>
+      </div>
+    </form>
+    <div class="gif-upload">
+      <div class="gif-export-preview"></div>
+      <div class="gif-upload-status"></div>
+    </div>
+    <span class="gif-export-progress-status"></span>
+    <div class="gif-export-progress-bar"></div>
+  </div>
+</div>

palettes-proto/templates/settings/import.html

@@ -0,0 +1,55 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Load from Browser
+  </div>
+  <div class="settings-item">
+    <span>Load a <span class="import-highlight">local piskel</span> saved in this Browser</span>
+    <div class="import-section">
+      <button type="button" class="button  button-primary browse-local-button">Browse local saves</button>
+    </div>
+  </div>
+  <div class="settings-title">
+    Load .piskel file
+  </div>
+  <div class="settings-item">
+    <span>Load a <span class="import-highlight">.piskel</span> file from your computer</span>
+
+    <div class="import-section">
+      <button type="button" class="button  button-primary open-piskel-button">Browse .piskel files</button>
+      <span class="file-input-open-piskel-status"></span>
+      <input style="display:none"
+        type="file" name="open-piskel-input"
+        value="file" accept=".piskel"/>
+    </div>
+  </div>
+  <div class="settings-title">
+    Import From Picture
+  </div>
+  <div class="settings-item">
+    <div style="margin-top:5px;margin-bottom:5px;">Supports : <span class="import-highlight">PNG, JPG, BMP, Animated GIF ...</span></div>
+    <div class="import-section">
+      <button type="button" class="button  button-primary file-input-button">Browse images</button>
+      <input style="display:none"
+        type="file" name="file-upload-input"
+        value="file" accept="image/*"/>
+    </div>
+  </div>
+  <div class="settings-title">
+    Recover recent sessions
+  </div>
+  <div class="settings-item previous-session">
+      <!-- <span>Load a <span class="import-highlight">backup</span> from a recent session</span>
+      <div class="import-section">
+        <button type="button" class="button  button-primary load-recent-button">Browse recent sessions</button>
+      </div> -->
+  </div>
+
+  <script type="text/template" id="previous-session-info-template">
+    <div>
+      Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
+      <div style="margin-top:10px;">
+        <button type="button" class="button  button-primary restore-session-button">Restore</button>
+      </div>
+    </div>
+  </script>
+</div>

palettes-proto/templates/settings/resize.html

@@ -0,0 +1,20 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Resize drawing area
+  </div>
+  <div class="settings-item">
+    <form action="" method="POST" name="resize-form">
+      <div class="resize-section">
+        <span class="resize-section-title  resize-section-title-small">Size :</span>
+        <input type="text" class="textfield resize-size-field" name="resize-width"/>x
+        <input type="text" class="textfield resize-size-field" name="resize-height"/>
+      </div>
+      <div class="resize-section">
+        <span class="resize-section-title  resize-section-title-small">Resize canvas content : </span>
+        <input type="checkbox" class="resize-content-checkbox" name="resize-content-checkbox" value="true"/>
+      </div>
+      <input type="submit" class="button button-primary resize-button" value="Resize" />
+      <input type="button" class="button resize-cancel-button" value="Cancel" />
+    </form>
+  </div>
+</div>

palettes-proto/templates/settings/save.html

@@ -0,0 +1,46 @@
+<div class="settings-section">
+  <form action="" method="POST" name="save-form">
+    <div class="settings-title">Describe your piskel</div>
+    <div class="settings-item">
+      <div class="settings-form-section" style="overflow:hidden">
+        <label class="row" style="float:left;line-height:28px;">Title : </label>
+        <input id="save-name" type="text" class="save-field textfield" style="float:left;width:200px;margin-left:10px;"/>
+      </div>
+      <div class="settings-form-section">
+        <textarea id="save-description" class="save-field textfield" placeholder="Description ..."></textarea>
+      </div>
+      <div class="settings-form-section save-public-section">
+        <label class="row">
+          Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
+        </label>
+      </div>
+    </div>
+    <div class="settings-title">Save online</div>
+    <div class="settings-item">
+      <input type="button" class="button button-primary" id="save-online-button" value="Save to your gallery" />
+      <div id="save-online-status" class="save-status"></div>
+    </div>
+    <div class="settings-title">Save offline in Browser</div>
+    <div class="settings-item">
+      <input type="button" class="button button-primary" id="save-browser-button" value="Save in Browser" />
+      <div id="save-browser-status" class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
+    </div>
+    <div class="settings-title">Save offline as File</div>
+    <div class="settings-item">
+      <input type="button" class="button button-primary" id="save-file-button" value="Save as File" />
+      <div id="save-file-status" class="save-status"></div>
+    </div>
+  </form>
+
+  <script type="text/template" id="save-please-login-partial">
+    <span>Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online !</span>
+  </script>
+
+  <script type="text/template" id="save-online-status-partial">
+    <span>Your piskel will be stored online in your gallery.</span>
+  </script>
+
+  <script type="text/template" id="save-file-status-template">
+    <span>Your piskel will be downloaded as <span class="save-file-name">{{name}}<span></span>
+  </script>
+</div>