200 lines
6.9 KiB
HTML
200 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Sketchy</title>
|
|
<meta charset='UTF-8'>
|
|
<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1">
|
|
<link rel='stylesheet/less' href='css/main.less'>
|
|
<link rel='stylesheet' href='css/switches.css'>
|
|
<link rel='stylesheet' href='css/value_selector.css'>
|
|
<link rel='stylesheet' href='css/seekbars.css'>
|
|
<link rel='stylesheet' href='css/color-picker.css'>
|
|
<script src='js/less-1.5.0.min.js'></script>
|
|
<script src='js/libs/mobilebrowsers.js'></script>
|
|
</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>
|
|
</header>
|
|
|
|
<div id='container'>
|
|
<canvas></canvas>
|
|
<canvas></canvas>
|
|
</div>
|
|
|
|
<div id='menu'>
|
|
<p class='icon-settings'>Settings</p>
|
|
<div class='options'>
|
|
<div class='general'>
|
|
<button id='settype'>Brush Type<span>Sketch</span></button>
|
|
<button id='setcolor'>Color<span>#000000</span></button>
|
|
<!--<button id='setlineJoin'>Line Join<span>Round</span></button>-->
|
|
<button id='setlineCap'>Line Cap<span>Round</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>
|
|
<p id='connectTelorance'>Connet Telorance<span>40</span></p>
|
|
<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>
|
|
<p id='connectTelorance'>Connet Telorance<span>40</span></p>
|
|
<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>20</span></p>
|
|
<div role="slider" class='furLength'>
|
|
<div>
|
|
<progress value="20" min="1" max="100"></progress>
|
|
<button style='left: 20%'>handler</button>
|
|
</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'><label><span>Sketch</span></label></li>
|
|
<li><label><span>Fur</span></label></li>
|
|
<li><label><span>Pen</span></label></li>
|
|
<li><label><span>Line</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='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>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>
|
|
<br>
|
|
<span>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>
|
|
|
|
|
|
<!-- 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>
|
|
<span>Sketchy is a free sketch / paint application for Firefox OS.</span>
|
|
<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><br />
|
|
<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>
|
|
|
|
<!-- PRELOADER -->
|
|
<div class='hidden'>
|
|
<img src='value_selector/images/ui/pattern.png'>
|
|
<img src='value_selector/images/ui/gradient.png'>
|
|
<img src='value_selector/images/ui/shadow.png'>
|
|
<img src='value_selector/images/ui/shadow-invert.png'>
|
|
<img src='value_selector/images/icons/checked.png'>
|
|
<img src='value_selector/images/ui/default.png'>
|
|
<img src='value_selector/images/ui/affirmative.png'>
|
|
</div>
|
|
|
|
<script src='js/libs/yepnope.min.js'></script>
|
|
<script src='js/libs/zepto.min.js'></script>
|
|
<script src='js/functions.js'></script>
|
|
<script src='js/main.js'></script>
|
|
|
|
</body>
|
|
|
|
</html>
|