Sketchy/index.html
Mahdi Dibaiee 02ed7f9f08 eraser
2014-02-06 18:10:10 +03:30

174 lines
5.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='UTF-8'>
<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>
</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>
<h1>File Name</h1>
<ol role='listbox'>
<li aria-selected='true' data-input><label><span contenteditable>My Sketch</span></label></li>
</ol>
</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'>
<button id='closePicker'>×</button>
<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>
</div>
<script src='js/libs/yepnope.min.js'></script>
<script src='js/libs/zepto.min.js'></script>
<script src='js/libs/touch.js'></script>
<script src='js/functions.js'></script>
<script src='js/main.js'></script>
</body>
</html>