2015-12-30 11:03:51 +00:00
<!DOCTYPE html>
< html dir = "ltr" lang = "en-US" >
< head >
2016-02-25 21:57:22 +00:00
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
2015-12-30 11:03:51 +00:00
< title > miniPaint - online image editor< / title >
< meta name = "description" content = "miniPaint is free online image editor using HTML5. Edit, adjust your images, add effects online in your browser, without installing anything..." / >
< meta name = "keywords" content = "photo, image, picture, transparent, layers, free, edit, html5, canvas, javascript, online, photoshop, gimp, effects, sharpen, blur, magic wand tool, clone tool, rotate, resize, photoshop online, online tools, tilt shift, sprites, keypoints" / >
2016-02-25 21:57:22 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
2015-12-30 11:03:51 +00:00
< link rel = "stylesheet" type = "text/css" href = "styles/styles.css" / >
< link rel = "shortcut icon" href = "img/favicon.png" / >
< / head >
< body >
2016-02-20 19:45:43 +00:00
< div id = "wrapper" >
< div id = "sidebar_left" >
< a id = "logo" href = "" > miniPaint< / a >
2015-12-30 11:03:51 +00:00
< div id = "menu_left_container" >
< noscript >
Select object tool, Select area tool, Magic Wand Tool,
Erase, Fill, Pick Color, Pencil, Draw line, Draw letters,
Draw rectangle, Draw circle, Brush, Blur tool, Sharpen tool,
Clone tool, Gradient
< / noscript >
< / div >
< div style = "clear:both;" > < / div >
< div id = "main_colour_container" >
2016-02-25 21:57:22 +00:00
< input type = "color" id = "main_colour" value = "" onchange = "GUI.set_color(this);" / >
< div style = "display:none;" id = "main_colour_alt" onclick = "GUI.toggle_color_select();" > < / div >
2015-12-30 11:03:51 +00:00
< / div >
2016-02-11 18:32:19 +00:00
< div class = "block" id = "all_colors" > < / div >
2015-12-30 11:03:51 +00:00
< div class = "block" >
2016-02-20 19:45:43 +00:00
< input type = "text" id = "color_hex" value = "#000000" / > < br / >
2015-12-30 11:03:51 +00:00
< div id = "main_colour_rgb" >
2016-03-06 22:35:24 +00:00
< a class = "red" href = "#" title = "Red" onclick = "return false;" > Red< / a >
< input id = "rgb_r" onKeyUp = "GUI.set_color_rgb(this, 'r')" onchange = "GUI.set_color_rgb(this, 'r')" type = "number" value = "255" / >
< br / >
< a class = "green" href = "#" title = "Green" onclick = "return false;" > Green< / a >
< input id = "rgb_g" onKeyUp = "GUI.set_color_rgb(this, 'g')" onchange = "GUI.set_color_rgb(this, 'g')" type = "number" value = "255" / >
< br / >
< a class = "blue" href = "#" title = "Blue" onclick = "return false;" > Blue< / a >
< input id = "rgb_b" onKeyUp = "GUI.set_color_rgb(this, 'b')" onchange = "GUI.set_color_rgb(this, 'b')" type = "number" value = "255" / >
< br / >
< a class = "alpha" href = "#" title = "Alpha" onclick = "return false;" > Alpha< / a >
< input id = "rgb_a" onKeyUp = "GUI.set_color_rgb(this, 'a')" onchange = "GUI.set_color_rgb(this, 'a')" type = "number" value = "255" / >
2015-12-30 11:03:51 +00:00
< / div >
< / div >
< div class = "block" id = "info" > < / div >
< div class = "block" id = "action_attributes" > < / div >
< / div >
2016-02-20 19:45:43 +00:00
< div id = "canvas_wrapper" >
< canvas id = "canvas_back" > < div class = "error" > Your browser doesn't support canvas.< / div > < / canvas >
< canvas id = "Background" > < / canvas >
< div id = "canvas_more" > < / div >
< canvas id = "canvas_front" > < / canvas >
< canvas id = "canvas_grid" > < / canvas >
< div id = "resize-w" > < / div >
< div id = "resize-h" > < / div >
< div id = "resize-wh" > < / div >
< / div >
< div id = "sidebar_right" >
2015-12-30 11:03:51 +00:00
< div id = "preview" >
< canvas id = "canvas_preview" > < / canvas >
< div style = "margin-top:105px;padding-left:5px;" >
2016-02-25 21:57:22 +00:00
< input onclick = "GUI.zoom(-1);EVENTS.scroll_window();" style = "width:30px;" class = "layer_add" type = "button" value = "-" / >
< input onclick = "GUI.zoom(+1);EVENTS.scroll_window();" style = "width:30px;" class = "layer_add" type = "button" value = "+" / >
2015-12-30 11:03:51 +00:00
< b > Zoom: < / b > < span id = "zoom_nr" > 100< / span > %
< br / >
2016-02-25 21:57:22 +00:00
< input style = "width:95%;" id = "zoom_range" type = "range" value = "100" min = "50" max = "1000" step = "50" oninput = "GUI.zoom(this.value);EVENTS.scroll_window();" / >
2015-12-30 11:03:51 +00:00
< / div >
< / div >
< div id = "layers_base" >
< b > Layers< / b > < a title = "Add new layer" class = "layer_add" onclick = "LAYER.layer_add();return false;" href = "#" > +< / a >
< a title = "Move down" onclick = "LAYER.move_layer('down');return false;" class = "layers_arrow" href = "#" > ↓ < / a >
< a title = "Move up" onclick = "LAYER.move_layer('up');return false;" class = "layers_arrow" href = "#" > ↑ < / a >
< a title = "Set opacity" onclick = "LAYER.set_alpha();return false;" class = "layers_arrow" href = "#" > A< / a >
< div style = "margin-top:5px;" id = "layers" > < / div >
< / div >
< / div >
< / div >
2016-03-06 15:44:47 +00:00
< div id = "mobile_menu" >
< a class = "left_mobile_menu" onclick = "GUI.toggle('#sidebar_left');return false;" href = "#" > < / a >
< a class = "right_mobile_menu" onclick = "GUI.toggle('#sidebar_right');return false;" href = "#" > < / a >
< / div >
2015-12-30 11:03:51 +00:00
< div id = "main_menu" class = "ddsmoothmenu" >
< ul >
< li >
2016-03-06 15:44:47 +00:00
< a class = "icon file" href = "#" > File< / a >
2015-12-30 11:03:51 +00:00
< ul >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(FILE, 'file_new');" href = "#" > New< / a > < / li >
< li > < a onclick = "call_menu(FILE, 'file_open');" href = "#" > Open...< / a > < / li >
< li > < a onclick = "call_menu(FILE, 'file_save');" href = "#" > Save as...< / a > < / li >
< li > < a onclick = "call_menu(FILE, 'file_print');" href = "#" > Print...< / a > < / li >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
< li >
2016-03-06 15:44:47 +00:00
< a class = "icon edit" href = "#" > Edit< / a >
2015-12-30 11:03:51 +00:00
< ul >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(EDIT, 'edit_undo');" href = "#" > Undo< / a > < / li >
2015-12-30 11:03:51 +00:00
< li > < div class = "mid-line" > < / div > < / li >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(EDIT, 'edit_cut');" href = "#" > Cut selection< / a > < / li >
< li > < a onclick = "call_menu(EDIT, 'edit_copy');" href = "#" > Copy selection< / a > < / li >
< li > < a onclick = "call_menu(EDIT, 'edit_paste');" href = "#" > Paste selection< / a > < / li >
2015-12-30 11:03:51 +00:00
< li > < div class = "mid-line" > < / div > < / li >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(EDIT, 'edit_select');" href = "#" > Select All< / a > < / li >
< li > < a onclick = "call_menu(EDIT, 'edit_clear');" href = "#" > Clear selection< / a > < / li >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
< li >
2016-03-06 15:44:47 +00:00
< a class = "icon image" href = "#" > Image< / a >
2015-12-30 11:03:51 +00:00
< ul >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(IMAGE, 'image_information');" href = "#" > Information...< / a > < / li >
< li > < a onclick = "call_menu(IMAGE, 'image_size');" href = "#" > Size...< / a > < / li >
< li > < a onclick = "call_menu(IMAGE, 'image_trim');" href = "#" > Trim< / a >
< li > < a onclick = "call_menu(IMAGE, 'image_crop');" href = "#" > Crop Selection< / a >
2015-12-30 11:03:51 +00:00
< li > < div class = "mid-line" > < / div > < / li >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(IMAGE, 'image_resize');" href = "#" > Resize...< / a > < / li >
2015-12-30 11:03:51 +00:00
< li >
< a href = "#" > Rotate< / a >
< ul >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(IMAGE, 'image_rotate_left');" href = "#" > Left< / a > < / li >
< li > < a onclick = "call_menu(IMAGE, 'image_rotate_right');" href = "#" > Right< / a > < / li >
< li > < a onclick = "call_menu(IMAGE, 'image_rotate');" href = "#" > Rotation...< / a > < / li >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
< li >
< a href = "#" > Flip< / a >
< ul >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(IMAGE, 'image_vflip');" href = "#" > Vertical< / a > < / li >
< li > < a onclick = "call_menu(IMAGE, 'image_hflip');" href = "#" > Horizontal< / a > < / li >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
< li > < div class = "mid-line" > < / div > < / li >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(IMAGE, 'image_colors');" href = "#" > Color corrections...< / a > < / li >
< li > < a onclick = "call_menu(IMAGE, 'image_auto_adjust');" href = "#" > Auto adjust colors< / a > < / li >
< li > < a onclick = "call_menu(IMAGE, 'image_GrayScale');" href = "#" > GrayScale< / a >
< li > < a onclick = "call_menu(IMAGE, 'image_decrease_colors');" href = "#" > Decrease color depth...< / a > < / li >
< li > < a onclick = "call_menu(IMAGE, 'image_negative');" href = "#" > Negative< / a > < / li >
< li > < a onclick = "call_menu(IMAGE, 'image_grid');" href = "#" > Grid...< / a > < / li >
2015-12-30 11:03:51 +00:00
< li > < div class = "mid-line" > < / div > < / li >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(IMAGE, 'image_histogram');" href = "#" > Histogram...< / a > < / li >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
< li >
2016-03-06 15:44:47 +00:00
< a class = "icon layer" href = "#" > Layer< / a >
2015-12-30 11:03:51 +00:00
< ul >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(LAYER, 'layer_new');" href = "#" > New< / a > < / li >
< li > < a onclick = "call_menu(LAYER, 'layer_dublicate');" href = "#" > Dublicate< / a > < / li >
< li > < a onclick = "call_menu(LAYER, 'layer_show_hide');" href = "#" > Show / Hide< / a > < / li >
< li > < a onclick = "call_menu(LAYER, 'layer_crop');" href = "#" > Crop Selection< / a >
< li > < a onclick = "call_menu(LAYER, 'layer_delete');" href = "#" > Delete< / a > < / li >
2015-12-30 11:03:51 +00:00
< li > < div class = "mid-line" > < / div > < / li >
< li >
< a href = "#" > Move< / a >
< ul >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(LAYER, 'layer_move_up');" href = "#" > Up< / a > < / li >
< li > < a onclick = "call_menu(LAYER, 'layer_move_down');" href = "#" > Down< / a > < / li >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(LAYER, 'layer_opacity');" href = "#" > Opacity...< / a > < / li >
2015-12-30 11:03:51 +00:00
< li > < div class = "mid-line" > < / div > < / li >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(LAYER, 'layer_trim');" href = "#" > Trim< / a > < / li >
< li > < a onclick = "call_menu(LAYER, 'layer_resize');" href = "#" > Resize...< / a > < / li >
< li > < a onclick = "call_menu(LAYER, 'layer_clear');" href = "#" > Clear< / a > < / li >
2015-12-30 11:03:51 +00:00
< li > < div class = "mid-line" > < / div > < / li >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(LAYER, 'layer_differences');" href = "#" > Differences Down< / a > < / li >
< li > < a onclick = "call_menu(LAYER, 'layer_merge_down');" href = "#" > Merge Down...< / a > < / li >
< li > < a onclick = "call_menu(LAYER, 'layer_flatten');" href = "#" > Flatten Image< / a > < / li >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
< li >
2016-03-06 15:44:47 +00:00
< a class = "icon effects" href = "#" > Effects< / a >
2015-12-30 11:03:51 +00:00
< ul id = "effects_list" >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(EFFECTS, 'effects_bw');" href = "#" > Black and White...< / a >
2015-12-30 11:03:51 +00:00
< li >
< a href = "#" > Blur< / a >
< ul >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(EFFECTS, 'effects_BoxBlur');" href = "#" > Blur-Box...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_GaussianBlur');" href = "#" > Blur-Gaussian...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_StackBlur');" href = "#" > Blur-Stack...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_zoomblur');" href = "#" > Blur-Zoom...< / a >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(EFFECTS, 'effects_bulge_pinch');" href = "#" > Bulge/Pinch...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_colorize');" href = "#" > Colorize...< / a > < / li >
< li > < a onclick = "call_menu(EFFECTS, 'effects_denoise');" href = "#" > Denoise...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Desaturate');" href = "#" > Desaturate...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Dither');" href = "#" > Dither...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_dot_screen');" href = "#" > Dot Screen...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Edge');" href = "#" > Edge...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Emboss');" href = "#" > Emboss...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Enrich');" href = "#" > Enrich...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Gamma');" href = "#" > Gamma...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Grains');" href = "#" > Grains...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_heatmap');" href = "#" > Heatmap...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_HSLAdjustment');" href = "#" > HSL Adjustment...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_jpg_vintage');" href = "#" > JPG Compression...< / a > < / li >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Mosaic');" href = "#" > Mosaic...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Oil');" href = "#" > Oil...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_perspective');" href = "#" > Perspective...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Posterize');" href = "#" > Posterize...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Sepia');" href = "#" > Sepia...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Sharpen');" href = "#" > Sharpen...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_Solarize');" href = "#" > Solarize...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_tilt_shift');" href = "#" > Tilt Shift...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_vignette');" href = "#" > Vignette...< / a >
< li > < a onclick = "call_menu(EFFECTS, 'effects_vintage');" href = "#" > Vintage...< / a >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
< li >
2016-03-06 15:44:47 +00:00
< a class = "icon tools" href = "#" > Tools< / a >
2015-12-30 11:03:51 +00:00
< ul >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(TOOLS, 'tools_borders');" href = "#" > Borders...< / a > < / li >
< li > < a onclick = "call_menu(TOOLS, 'tools_sprites');" href = "#" > Sprites...< / a > < / li >
< li > < a onclick = "call_menu(TOOLS, 'tools_keypoints');" href = "#" > Key-points< / a > < / li >
< li > < a onclick = "call_menu(TOOLS, 'tools_color2alpha');" href = "#" > Color to Alpha...< / a > < / li >
< li > < a onclick = "call_menu(TOOLS, 'tools_color_zoom');" href = "#" > Color Zoom...< / a > < / li >
< li > < a onclick = "call_menu(TOOLS, 'tools_restore_alpha');" href = "#" > Restore alpha...< / a > < / li >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
< li >
2016-03-06 15:44:47 +00:00
< a class = "icon help" href = "#" > Help< / a >
2015-12-30 11:03:51 +00:00
< ul >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(HELP, 'help_shortcuts');" href = "#" > Keyboard Shortcuts...< / a > < / li >
2015-12-30 11:03:51 +00:00
< li > < a onclick = "window.location='http://viliusle.github.io/miniPaint/';" href = "http://viliusle.github.io/miniPaint/" > Website< / a > < / li >
2016-02-25 21:57:22 +00:00
< li > < a onclick = "call_menu(HELP, 'help_credits');" href = "#" > Credits...< / a > < / li >
< li > < a onclick = "call_menu(HELP, 'help_about');" href = "#" > About...< / a > < / li >
2015-12-30 11:03:51 +00:00
< / ul >
< / li >
< / ul >
< / div >
< div style = "display:none;" id = "tmp" > < / div >
< div id = "popup" > < / div >
2016-02-08 18:11:35 +00:00
< script src = "libs/jquery.js" > < / script >
2015-12-30 11:03:51 +00:00
< script src = "libs/menu.js" > < / script >
2016-02-08 18:11:35 +00:00
< script src = "libs/imagefilters.min.js" > < / script >
2015-12-30 11:03:51 +00:00
< script src = "libs/glfx.js" > < / script >
2016-02-08 18:11:35 +00:00
< script src = "libs/exif.min.js" > < / script >
2015-12-30 11:03:51 +00:00
< script src = "libs/harmony.js" > < / script >
< script src = "libs/vintage.js" > < / script >
< script src = "libs/kdtree.js" > < / script >
< script src = "libs/sift.js" > < / script >
2016-02-25 21:57:22 +00:00
< script src = "js/elements.js" > < / script >
2015-12-30 11:03:51 +00:00
< script src = "js/helpers.js" > < / script >
2016-02-25 21:57:22 +00:00
< script src = "libs/popup.js" > < / script >
< script src = "js/events.js" > < / script >
< script src = "js/file.js" > < / script >
< script src = "js/edit.js" > < / script >
< script src = "js/image.js" > < / script >
2015-12-30 11:03:51 +00:00
< script src = "js/layers.js" > < / script >
2016-02-25 21:57:22 +00:00
< script src = "js/effects.js" > < / script >
< script src = "js/tools.js" > < / script >
< script src = "js/draw_tools.js" > < / script >
< script src = "js/gui.js" > < / script >
< script src = "js/help.js" > < / script >
< script src = "config.js" > < / script >
2015-12-30 11:03:51 +00:00
< script src = "js/main.js" > < / script >
< / body >
< / html >
