2014-02-19 21:36:39 +00:00
<!DOCTYPE html>
< html >
< head >
< title > Sketchy< / title >
< meta charset = 'UTF-8' >
< link rel = 'stylesheet' href = 'css/main.css' >
< / head >
< body >
< header >
< button class = 'menu' > < / button >
< span class = 'separator long left menu' > < / span >
< p id = 'title' > Sketchy< / p >
< button class = 'save' > < / button >
< span class = 'separator small right' > < / span >
< button class = 'load' > < / button >
< / header >
< div id = 'container' >
< canvas > < / canvas >
< canvas > < / canvas >
< / div >
< div id = 'menu' >
< div class = 'options' >
< p class = 'icon-settings' > Settings< / p >
< div class = 'general' >
< button id = 'settype' > Brush Type< span > Sketch< / span > < / button >
< button id = 'setcolor' > Color< span > #000000< / span > < / button >
< button id = 'setbg' > Background< span > #ffffff< / span > < / button >
< p id = 'lineWidth' > Line Width < span > 2< / span > < / p >
< div role = "slider" class = 'lineWidth' >
< div >
< progress value = "2" min = "1" max = "100" > < / progress >
< button style = 'left: 2%' > handler< / button >
< / div >
< / div >
< / div >
< br / >
< hr >
< div class = 'sketch' >
< p class = 'icon-settings' > Sketch< / p >
2014-02-20 10:06:52 +00:00
< p id = 'connectTelorance' > Telorance< span > 40< / span > < / p >
2014-02-19 21:36:39 +00:00
< div role = "slider" class = 'connectTelorance' >
< div >
< progress value = "40" min = "1" max = "100" > < / progress >
< button style = 'left: 40%' > handler< / button >
< / div >
< / div >
< / div >
< div class = 'fur hidden' >
< p class = 'icon-settings' > Fur< / p >
2014-02-20 10:06:52 +00:00
< p id = 'connectTelorance' > Telorance< span > 40< / span > < / p >
2014-02-19 21:36:39 +00:00
< div role = "slider" class = 'connectTelorance' >
< div >
< progress value = "40" min = "10" max = "100" > < / progress >
< button style = 'left: 40%' > handler< / button >
< / div >
< / div >
< p id = 'furLength' > Fur Length< span > 50< / span > < / p >
< div role = "slider" class = 'furLength' >
< div >
< progress value = "50" min = "1" max = "100" > < / progress >
< button style = 'left: 50%' > handler< / button >
< / div >
< / div >
< / div >
< div class = 'line hidden' >
< button id = 'setlineJoin' > Line Join< span > Round< / span > < / button >
< button id = 'setlineCap' > Line Cap< span > Round< / span > < / button >
< p class = 'fill' > Fill< span > No< / span > < / p >
< p class = 'stroke' > Stroke< span > Yes< / span > < / p >
< / div >
< div class = 'shape hidden' >
< p class = 'icon-settings' > Shape< / p >
< button id = 'setshape' > Type< span > Circle< / span > < / button >
< p class = 'fill' > Fill< span > No< / span > < / p >
< p class = 'stroke' > Stroke< span > Yes< / span > < / p >
< div >
< / div >
< / div >
< / div >
< div class = 'bottom' >
< button id = 'clear' class = 'icon-clear' > Clear< / button >
< button id = 'undo' class = 'icon-undo' > Undo< / button >
< button id = 'redo' class = 'icon-redo' > Redo< / button >
< hr >
< button id = 'about' > About< / button >
< / div >
< / div >
< form role = 'dialog' data-type = 'value-selector' id = 'type' class = 'hidden single' >
< section class = 'scrollable' >
< h1 > Brush Type< / h1 >
< ol role = 'listbox' >
< li aria-selected = 'true' data-target = 'sketch' > < label > < span > Sketch< / span > < / label > < / li >
< li data-target = 'fur' > < label > < span > Fur< / span > < / label > < / li >
< li data-target = 'pencil' > < label > < span > Pencil< / span > < / label > < / li >
< li data-target = 'line' > < label > < span > Line< / span > < / label > < / li >
< li data-target = 'shape' > < label > < span > Shape< / span > < / label > < / li >
<!-- <li><label><span>Eraser</span></label></li> -->
< / ol >
< / section >
< menu >
< button class = 'affirmative full' > Cancel< / button >
< / menu >
< / form >
< form role = 'dialog' data-type = 'value-selector' id = 'lineJoin' class = 'hidden single' >
< section class = 'scrollable' >
< h1 > Line Join< / h1 >
< ol role = 'listbox' >
< li aria-selected = 'true' > < label > < span > Round< / span > < / label > < / li >
< li > < label > < span > Bevel< / span > < / label > < / li >
< li > < label > < span > Miter< / span > < / label > < / li >
< / ol >
< / section >
< menu >
< button class = 'affirmative full' > Cancel< / button >
< / menu >
< / form >
< form role = 'dialog' data-type = 'value-selector' id = 'shape' class = 'hidden single' >
< section class = 'scrollable' >
< h1 > Shape Type< / h1 >
< ol role = 'listbox' >
< li aria-selected = 'true' data-target = 'shape' > < label > < span > Circle< / span > < / label > < / li >
< li data-target = 'shape' > < label > < span > Rectangle< / span > < / label > < / li >
< li data-target = 'shape' > < label > < span > Square< / span > < / label > < / li >
< li data-target = 'shape' > < label > < span > Triangle< / span > < / label > < / li >
< / ol >
< menu >
< button class = 'affirmative full' > Cancel< / button >
< / menu >
< / section >
< / form >
< form role = 'dialog' data-type = 'value-selector' id = 'lineCap' class = 'hidden single' >
< section class = 'scrollable' >
< h1 > Line Cap< / h1 >
< ol role = 'listbox' >
< li aria-selected = 'true' > < label > < span > Round< / span > < / label > < / li >
< li > < label > < span > Square< / span > < / label > < / li >
< li > < label > < span > Butt< / span > < / label > < / li >
< / ol >
< / section >
< menu >
< button class = 'affirmative full' > Cancel< / button >
< / menu >
< / form >
< form role = 'dialog' data-type = 'value-selector' id = 'save' class = 'hidden confirm' >
< section class = 'scrollable' >
< h1 > Save< / h1 >
< h1 > Type< / h1 >
< ol role = 'listbox' >
< li id = 'exp' aria-selected = 'true' > < label > < span > Export to Image< / span > < / label > < / li >
< li id = 'pro' > < label > < span > Sketchy Project< / span > < / label > < / li >
< / ol >
< h1 > Background< / h1 >
< ol role = 'listbox' >
< li aria-selected = 'true' > < label > < span > White< / span > < / label > < / li >
< li > < label > < span > Current Color< / span > < / label > < / li >
< li > < label > < span > Transparent< / span > < / label > < / li >
< / ol >
< h1 > File Name< / h1 >
< ol role = 'listbox' >
< li aria-selected = 'true' data-input > < label > < span contenteditable > My Sketch< / span > < / label > < / li >
< / ol >
< br >
< span class = 'special' > Note: You must disable pop-up blocker to save your sketch.< / span >
< / section >
< menu >
< button class = 'affirmative' type = 'button' > Cancel< / button >
< button class = 'affirmative' type = 'button' > Save< / button >
< / menu >
< / form >
< form role = 'dialog' data-type = 'value-selector' id = 'load' class = 'hidden confirm' >
< section class = 'scrollable' >
< h1 > Load< / h1 >
< h1 class = 'hidden' > file< / h1 >
< ol role = 'listbox' >
< / ol >
< / section >
< menu >
< button class = 'affirmative' type = 'button' > Cancel< / button >
< button class = 'affirmative' type = 'button' > Load< / button >
< / menu >
< / form >
<!-- COLOR PICKER -->
< div class = 'picker overlay hidden' >
< div class = 'color-picker' >
< input value = 'Hex' class = 'format' type = 'hidden' selected >
< input class = 'color' val = '#000000' >
< div class = "spectrum" >
< div >
< div class = "pin" > < / div >
< / div >
< / div >
< input class = "luminosity" type = "range" min = "0" max = "100" / >
< / div >
< button class = 'close' > x< / button >
< / div >
< div class = 'about overlay hidden' >
< p > Sketchy< / p >
2014-02-21 13:21:12 +00:00
< span > Sketchy is a free sketch / paint application for Firefox.< br / > Current version: 1.2< / span >
2014-02-19 21:36:39 +00:00
< p > Developer< / p >
< span > Sketchy was found by Mahdi Dibaiee. More info: < a href = 'http://about.me/mdibaiee' > About.me< / a >
< br > < br >
Contact: < br >
< a href = 'https://twitter.com/mdibaiee' > Twitter< / a > •
< a href = 'mailto:mdibaiee@aol.com' > Email< / a >
< br > < br >
< a href = 'http://mdibaiee.github.io/Sketchy/changelog.html' > Changelog< / a >
< / span >
< button class = 'close' > x< / button >
< / div >
< div class = 'tour overlay hidden' >
< p > Tips< / p >
< span > Hey! Let me give you some tips to help you along the way,< / span > < br / > < br / >
< span > To finish a line, hold your finger for 1 second on mobile, or double click on desktop.< / span > < br / >
< span > Line join, fill / stroke are applied when the line is finished.< / span > < br / > < br / >
< span > If you found something missing, please get in touch with us.< / span >
< button class = 'button' > Gotcha!< / button >
< button class = 'close' > x< / button >
< / div >
2014-04-27 17:01:16 +00:00
< div class = 'vote overlay hidden' >
< p > King of Firefox OS Apps< / p >
< span > Hey! FirefoxOSGuide.com has started a competition, judging the best Firefox OS application by users' vote.< / span > < br / > < span > Would you consider taking a few minutes to vote for us, please?< / span > < br / > < br / >
< span > We're working to add new features to Sketchy like sharing and maybe some 'hosted' addons.< / span > < br / > < br / >
< span > If you would like to see something in Sketchy's new version, please get in touch with us.< / span >
< br / > < br / >
< a href = 'http://bit.ly/1irTueS' > What's your Favorite Firefox OS application?< / a >
< br / >
< a href = 'http://bit.ly/1hosWbM' > Original post on Firefox OS Guide< / a >
< button class = 'button' > OK!< / button >
< button class = 'close' > x< / button >
< / div >
2014-02-19 21:36:39 +00:00
<!-- PRELOADER -->
< div class = 'hidden' >
< img src = 'css/value_selector/images/ui/pattern.png' >
< img src = 'css/value_selector/images/ui/gradient.png' >
< img src = 'css/value_selector/images/ui/shadow.png' >
< img src = 'css/value_selector/images/ui/shadow-invert.png' >
< img src = 'css/value_selector/images/icons/checked.png' >
< img src = 'css/value_selector/images/ui/default.png' >
< img src = 'css/value_selector/images/ui/affirmative.png' >
< / div >
< script src = 'js/libs/zepto.min.js' > < / script >
< script src = 'js/libs/touch.js' > < / script >
< script src = 'js/libs/color-picker-touch.js' > < / script >
< script src = 'js/functions.js' > < / script >
< script src = 'js/shared.js' > < / script >
< script src = 'js/events.js' > < / script >
< script src = 'js/diff.js' > < / script >
< / body >
< / html >
