2012-08-23 02:57:35 +04:00
<!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" >
2013-06-13 02:04:39 +04:00
< link rel = "stylesheet" type = "text/css" href = "css/reset.css" >
< link rel = "stylesheet" type = "text/css" href = "css/style.css" >
< link rel = "stylesheet" type = "text/css" href = "css/tools.css" >
< link rel = "stylesheet" type = "text/css" href = "css/bootstrap/bootstrap.css" >
< link rel = "stylesheet" type = "text/css" href = "css/bootstrap/bootstrap-tooltip-custom.css" >
< link rel = "stylesheet" type = "text/css" href = "css/preview-film-section.css" >
2012-08-23 02:57:35 +04:00
< / head >
2013-06-18 01:10:35 +04:00
< body >
2013-07-15 01:25:12 +04:00
< div class = "piskel-name-container" >
< input readonly id = "piskel-name" type = "text" value = "" / >
< / div >
2013-06-19 21:01:12 +04:00
< div id = "main-wrapper" class = "main-wrapper" >
< div class = "sticky-section left-sticky-section" id = "tool-section" >
2013-07-15 01:18:03 +04:00
< div class = "sticky-section-wrap" >
< div class = "vertical-centerer" >
< ul id = "tools-container" class = "tools-wrapper" > < / ul >
< div class = "palette-wrapper" >
< div class = "tool-icon tool-color-picker" >
< input id = "color-picker" class = "color {hash:true}" type = "text" value = "" / >
< input id = "secondary-color-picker" class = "secondary-color-picker color {hash:true}" type = "text" value = "" / >
< / div >
< div class = "tool-icon tool-palette" >
< div id = "palette" class = "palette" >
< span class = "tool-icon palette-color transparent-color" data-color = "TRANSPARENT" title = "Transparent" > < / span >
< / div >
2013-06-19 21:01:12 +04:00
< / div >
2013-06-13 15:57:03 +04:00
< / div >
< / div >
< / div >
< / div >
2013-06-19 21:01:12 +04:00
< div id = "application-action-section" class = "sticky-section right-sticky-section" >
2013-07-15 01:18:03 +04:00
< div class = "sticky-section-wrap" >
< div class = "vertical-centerer" >
< div id = "settings" class = "tool-icon gear-icon" title = "Preferences" rel = "tooltip" data-placement = "left" > < / div >
< a class = "tool-icon gallery-icon" title = "Visit gallery" href = "http://juliandescottes.github.io/piskel-website/" rel = "tooltip" data-placement = "left" target = "_blank" > < / a >
2013-07-15 01:36:31 +04:00
< div class = "tool-icon save-icon" title = "Save to gallery" onclick = "pskl.app.storeSheet()" rel = "tooltip" data-placement = "left" > < / div >
< div class = "tool-icon upload-cloud-icon" title = "Upload as an animated GIF" onclick = "pskl.app.uploadAsAnimatedGIF()" rel = "tooltip" data-placement = "left" >
2013-07-15 01:18:03 +04:00
< span class = "label" > GIF< / span >
< / div >
2013-07-15 01:36:31 +04:00
< div class = "tool-icon upload-cloud-icon" title = "Upload as a spritesheet PNG" onclick = "pskl.app.uploadAsSpritesheetPNG()" rel = "tooltip" data-placement = "left" >
2013-07-15 01:18:03 +04:00
< span class = "label" > PNG< / span >
< / div >
2013-07-15 01:04:42 +04:00
< / div >
2013-07-15 01:18:03 +04:00
< div class = "drawer vertical-centerer" >
< div class = "drawer-content" >
< 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 >
2013-06-19 21:01:12 +04:00
< / div >
2013-06-17 13:36:56 +04:00
< / div >
2013-07-15 01:18:03 +04:00
< div class = "settings-item" >
< label for = "show-grid" > Show grid:< / label > < input id = "show-grid" type = "checkbox" / >
< / div >
2013-06-19 21:01:12 +04:00
< / div >
2013-06-17 12:37:23 +04:00
< / div >
2013-06-16 12:16:26 +04:00
< / div >
< / div >
2013-06-15 21:35:55 +04:00
< / div >
2013-06-15 21:04:36 +04:00
2013-06-19 21:01:12 +04:00
< div id = "column-wrapper" class = "column-wrapper" >
< div class = 'column left-column' >
<!-- List of frames: -->
< 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 >
2013-06-14 00:55:19 +04:00
< / div >
2013-06-12 16:53:47 +04:00
< / div >
2012-09-02 02:44:55 +04:00
2013-06-19 21:01:12 +04:00
< div class = 'column main-column' >
<!-- Drawing area: -->
< div id = "drawing-canvas-container" class = "drawing-canvas-container canvas-container" >
< div class = "canvas-background" > < / div >
< / div >
2013-06-12 16:53:47 +04:00
< / div >
2012-09-02 02:44:55 +04:00
2013-06-19 21:01:12 +04:00
< div class = "column right-column" >
<!-- Animation preview: -->
< div class = 'preview-container' >
< div id = 'preview-canvas-container' class = "canvas-container" >
< div class = "canvas-background" > < / div >
< / div >
< div >
< span id = "display-fps" class = "display-fps" > 12 FPS< / span >
< input id = "preview-fps" class = "range-fps" type = "range" min = "1" max = "24" value = "12" / >
< / div >
2013-06-12 16:53:47 +04:00
< / div >
< / div >
2012-08-23 02:57:35 +04:00
< / div >
< / div >
2012-08-30 02:48:22 +04:00
2013-08-04 20:27:32 +04:00
< script type = "text/javascript" >
(function () {
2013-08-04 23:20:25 +04:00
2013-08-04 20:27:32 +04:00
var loadScript = function (src, callback) {
2013-08-04 23:20:25 +04:00
var script = window.document.createElement('script');
script.setAttribute('src',src);
script.setAttribute('onload',callback);
window.document.body.appendChild(script);
2013-08-04 20:27:32 +04:00
};
2013-08-04 23:20:25 +04:00
2013-08-04 20:27:32 +04:00
if (window.location.href.indexOf("debug") != -1) {
window.exports = {};
2013-08-04 23:20:25 +04:00
var scriptIndex = 0;
window.loadNextScript = function () {
if (scriptIndex == exports.scripts.length) {
2013-08-04 20:27:32 +04:00
pskl.app.init();
// cleanup
delete window.exports;
delete window.loadDebugScripts;
delete window.done;
2013-08-04 23:20:25 +04:00
} else {
loadScript(exports.scripts[scriptIndex], "loadNextScript()");
scriptIndex ++;
2013-08-04 20:27:32 +04:00
}
};
2013-08-04 23:20:25 +04:00
loadScript("script-load-list.js", "loadNextScript()");
2013-08-04 20:27:32 +04:00
} else {
var script;
if (window.location.href.indexOf("pack") != -1) {
script = "build/piskel-packaged.js";
} else {
script = "build/piskel-packaged-min.js";
}
loadScript(script, "pskl.app.init()");
}
})();
< / script >
2012-08-23 02:57:35 +04:00
< / body >
< / html >