separated Web from Mobile
Before Width: | Height: | Size: 93 B After Width: | Height: | Size: 93 B |
Before Width: | Height: | Size: 94 B After Width: | Height: | Size: 94 B |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 182 B After Width: | Height: | Size: 182 B |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
@ -65,26 +65,62 @@ button {
|
|||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker {
|
.close {
|
||||||
width: 30rem;
|
display: block;
|
||||||
height: 30rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -15rem;
|
|
||||||
margin-left: -15rem;
|
|
||||||
|
|
||||||
#closePicker {
|
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
|
padding: 0 0 0.2rem 0.2rem;
|
||||||
|
font-size: 10pt;
|
||||||
border: 1px solid rgb(227, 227, 227);
|
border: 1px solid rgb(227, 227, 227);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1rem;
|
text-align: center;
|
||||||
left: 27rem;
|
top: -2%;
|
||||||
|
left: 97%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker, .about {
|
||||||
|
font-family: 'MozTT-Light';
|
||||||
|
width: 30rem;
|
||||||
|
height: 24.6rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -12.3rem;
|
||||||
|
margin-left: -15rem;
|
||||||
|
|
||||||
|
.color-picker {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
background: #262626;
|
||||||
|
padding: 1rem 2rem;;
|
||||||
|
height: 23rem;
|
||||||
|
margin-top: -11.5rem;
|
||||||
|
margin-left: -17rem;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 0 0.3rem black;
|
||||||
|
|
||||||
|
a, a:link, a:visited, a:active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
background: #262626;
|
||||||
|
color: white;
|
||||||
|
border: 1px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 11pt;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-size: 8pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -217,9 +253,13 @@ header {
|
|||||||
.bottom {
|
.bottom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 5rem;
|
bottom: 5rem;
|
||||||
button {
|
width: 100%;
|
||||||
|
button[class^='icon'] {
|
||||||
margin-left: 3.5rem;
|
margin-left: 3.5rem;
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
margin-left: 5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Before Width: | Height: | Size: 636 B After Width: | Height: | Size: 636 B |
Before Width: | Height: | Size: 960 B After Width: | Height: | Size: 960 B |
Before Width: | Height: | Size: 938 B After Width: | Height: | Size: 938 B |
Before Width: | Height: | Size: 583 B After Width: | Height: | Size: 583 B |
Before Width: | Height: | Size: 946 B After Width: | Height: | Size: 946 B |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 583 B After Width: | Height: | Size: 583 B |
Before Width: | Height: | Size: 946 B After Width: | Height: | Size: 946 B |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 578 B After Width: | Height: | Size: 578 B |
Before Width: | Height: | Size: 893 B After Width: | Height: | Size: 893 B |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 575 B After Width: | Height: | Size: 575 B |
Before Width: | Height: | Size: 889 B After Width: | Height: | Size: 889 B |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 755 B After Width: | Height: | Size: 755 B |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 475 B |
Before Width: | Height: | Size: 616 B After Width: | Height: | Size: 616 B |
Before Width: | Height: | Size: 177 B After Width: | Height: | Size: 177 B |
Before Width: | Height: | Size: 392 B After Width: | Height: | Size: 392 B |
Before Width: | Height: | Size: 601 B After Width: | Height: | Size: 601 B |
Before Width: | Height: | Size: 101 B After Width: | Height: | Size: 101 B |
Before Width: | Height: | Size: 82 B After Width: | Height: | Size: 82 B |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
Before Width: | Height: | Size: 83 B After Width: | Height: | Size: 83 B |
Before Width: | Height: | Size: 154 B After Width: | Height: | Size: 154 B |
Before Width: | Height: | Size: 86 B After Width: | Height: | Size: 86 B |
Before Width: | Height: | Size: 82 B After Width: | Height: | Size: 82 B |
Before Width: | Height: | Size: 154 B After Width: | Height: | Size: 154 B |
Before Width: | Height: | Size: 87 B After Width: | Height: | Size: 87 B |
BIN
Mobile/img/icons/MozillaFXOSIconTemplate1_overlay.png
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
Mobile/img/icons/icon120.png
Normal file
After Width: | Height: | Size: 8.0 KiB |
BIN
Mobile/img/icons/icon128.png
Normal file
After Width: | Height: | Size: 8.9 KiB |
BIN
Mobile/img/icons/icon16.png
Normal file
After Width: | Height: | Size: 738 B |
BIN
Mobile/img/icons/icon2.png
Normal file
After Width: | Height: | Size: 7.2 KiB |
102
Mobile/img/icons/icon2.svg
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="60"
|
||||||
|
height="60"
|
||||||
|
id="svg3029"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.48.4 r9939"
|
||||||
|
sodipodi:docname="icon2.svg"
|
||||||
|
inkscape:export-filename="/home/mahdi/Documents/Workshop/Mobile Editor/img/icons/icon128.png"
|
||||||
|
inkscape:export-xdpi="192"
|
||||||
|
inkscape:export-ydpi="192">
|
||||||
|
<defs
|
||||||
|
id="defs3031" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1"
|
||||||
|
inkscape:cx="-103.49318"
|
||||||
|
inkscape:cy="83.371075"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="true"
|
||||||
|
inkscape:grid-bbox="true"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:window-width="1600"
|
||||||
|
inkscape:window-height="876"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="24"
|
||||||
|
inkscape:window-maximized="1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata3034">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
transform="translate(0,12)">
|
||||||
|
<path
|
||||||
|
sodipodi:type="arc"
|
||||||
|
style="fill:#636363;fill-opacity:1;stroke:none"
|
||||||
|
id="path3037"
|
||||||
|
sodipodi:cx="31.428572"
|
||||||
|
sodipodi:cy="29.285715"
|
||||||
|
sodipodi:rx="26.428572"
|
||||||
|
sodipodi:ry="26.428572"
|
||||||
|
d="m 57.857143,29.285715 c 0,14.596097 -11.832474,26.428572 -26.428571,26.428572 C 16.832475,55.714287 5,43.881812 5,29.285715 5,14.689618 16.832475,2.8571434 31.428572,2.8571434 c 14.596097,0 26.428571,11.8324746 26.428571,26.4285716 z"
|
||||||
|
transform="matrix(1.0972973,0,0,1.0972973,-4.4864869,-14.135136)" />
|
||||||
|
<path
|
||||||
|
style="fill:#dedede;fill-opacity:1;stroke:#383838;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="m 40.415998,-0.2045792 c 0,0 -22.715805,23.0693572 -23.422911,25.0139012 -0.707107,1.944544 -2.740039,7.601398 -2.032932,8.485281 0.707106,0.883883 7.689786,-1.502602 9.015611,-2.828427 C 25.301591,29.140351 47.60072,6.06032 47.840618,4.833556 48.06427,3.68987 41.877086,-1.6684275 40.415998,-0.2045792 z"
|
||||||
|
id="path3054"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cssssc" />
|
||||||
|
<path
|
||||||
|
style="fill:#9e9e9e;fill-opacity:1;stroke:none"
|
||||||
|
d="m 44.875383,3.203193 c 0,0 -23.929105,24.058149 -24.015804,24.932991 -0.0867,0.874841 1.387194,2.71201 1.820692,2.187104 C 23.11377,29.798383 46.435977,5.9152018 46.522677,5.0403605 46.609378,4.1655182 45.222182,3.2906768 44.875383,3.203193 z"
|
||||||
|
id="path3841"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<path
|
||||||
|
style="fill:#c0c0c0;fill-opacity:1;stroke:none"
|
||||||
|
d="m 42.401427,1.6217284 c 0,0 -23.399153,24.3933116 -23.394823,24.6432736 0.0043,0.249963 1.094444,1.292086 1.650364,0.907398 0.55592,-0.384687 23.207727,-24.0757977 23.264805,-24.3893335 0.05708,-0.3135357 -1.2693,-1.1031781 -1.520346,-1.1613381 z"
|
||||||
|
id="path3861"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccssc" />
|
||||||
|
<path
|
||||||
|
style="fill:#494949;fill-opacity:1;stroke:none"
|
||||||
|
d="m 15.695313,42.429687 c 0,0 -0.515625,1.960938 -0.359375,2.539063 0.0078,0 0.141085,0.342965 2.430147,-0.344535 -0.01563,0.0078 -0.647057,-2.041553 -2.070772,-2.194528 z"
|
||||||
|
id="path3865"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
transform="translate(0,-12)"
|
||||||
|
sodipodi:nodetypes="cccc" />
|
||||||
|
<image
|
||||||
|
y="-11.715099"
|
||||||
|
x="0.21543235"
|
||||||
|
id="image3962"
|
||||||
|
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABHNCSVQICAgIfAhkiAAABwNJREFU aIHlm01MG+kZx3/vjIevNTEfNhvA3RqWbmirqKcGlMKlbZRL0kMPrSqUgIxCyIVISc45IUWRckmv vVXNIWqVNjRqN60qVZuqXdE0yiZebdRslV3YJSZmiw3YgzHD9PB6YuPYMLbHHqT+pUfGlud9n5+f 93nejxmEaZr8P0lx24F6y1ODNkWJz/cbSpVeV5acAhZ5ZuZZOSr8vtWeUkWbb0hUmcOWQwLYccqp In3kg1v9VNZYFcBq1okdwKi0kXr3WQmwADTkr7yN8xG1078n+5opt/9ygVUk7HbW3JQnaxnKiHY5 wB4kbBo5pA6CFKARCW0rAHbn4YasHSRYkL6kyfm3r+wAW43pHCxYSzu3bt3afPbsWfPc3Fzzfl/e b0hrQDOwwQGBFUJYRUvLvqqAEggExNmzZ72apsWuXbuWLHX9XhFWgbeAFAcAVgjRIIRoBToAH9CC HHkqIGKxGHNzc7qmaW/Pzs6WHN6lgAXQCmziYjUWUi1CiE4kZBO5hc4b9vz58535+fktRVF6rl69 WnSpWgq4Jfu66SiBTVmgQCfgJRtFO3b//v2tly9fehobG/3F2i4GbA3ldadB7EgI0YAEbaUM0Hy7 c+dOUlGUrps3b74xtIsB+5AVuV7LReB1VH3IHLVWUhXZ0tKSGYlENtPpdG9hP4XAVlUuWeVqISGE B/AjU6li0Hy7e/eurqpq2/Xr15vy+yoE9iFh61aVhRCNQAD5YzsCC4hkMkkkEkl5vd5dUVYK/vZS x9zNFiY/uV2Qo3bv3j0d8M/Pz6tWn/nAXmRVrkvu5lXhktNMtbaysmJGo9HMw4cPA1a/+cDWcK65 hBDNyMg6HtVCe/z4sa4oymGrbwtYIAtGzYGz004XNYxsvj148CCtqmr77du3FcidabUgt1g1LVZC CAV4G5mzdVEikWB1ddU0DKMd+MqK8FvUZ1UVQO5faz6U8y0ajW4h53fqBiyE8CLrRF1hAWVxcTGj adqhfOBmYKuGsAKZt67o1atXr4GtHG6khsDI6cfWiUQttLi4aGRH2C7gmmwDs4XKmm9d0fLysqko ShPkgDVqV6E7s+27plQqZS1hXwNb2zBHz5izuRvAxegCaJomFEXxQA7YJHfG66R8uJi7ltra2jxm 9vDOAt6hNsAduBxdgI6ODs0wjF3AGWTh0p3qJFusfMhUcVWHDx9uUFV1E3LAm8jFR9zBfqwjGtcV DAZbDMNYgxzwBjIaXzrYj48DAhwKhXymaX4OufyKI6cPJ9VKHXZDdqynp6dN1/Uo5CL8X6At+96p BYiXA1CwfD6f6vf7W6PR6Bewu0onkFu3qoe1EELD5cWGpRMnTnSaprk8MzOTgd3PeHwJfB1n8ti6 Q+C6jh071qPr+iPrfb5Ti0AvcnqqVg24sA0stK6ursa+vj5/Op1+Ugx4C1gC3nMAuKqDdKdsbGys d3t7+9Pz58+nigEDfAx8m+rzz/Xoer1ez9DQUH88Hv8g37HC57TiwDLwTeAJ1cnVHD537lzIMIyF 6enpL/I/L+bUQ+AouTuIlcjExaEcCoWaRkdH+3Rdv1voWDHgdeATYKQK4AwuDudLly4dTaVSH05O TsbsAAN8hFwaDlYInHYLNhwOv9Pb2+tJJpN/LOZYKWAD+BNwHHmHoFzpbsAODw+3nT59ejAej/9i amqq6FZ3r8KSAD4ATiGXibZlmqaB3IHVLW8HBgaar1y5ciyRSPw6HA6/LOXbfpX0U+AR8GPkUW45 WqsXbDAYbJqdnf1eKpV6f3x8/B97OWVn6ngC/Bv4KXDIPi+r9YAdHBxsuXHjxohpmn8/c+bM+/s5 Zfd56Q+RK7GfAb8FXtm4JkaN5+Ljx4/7Ll++PKTr+h/GxsZ+b+each4Qf4Q8KPgJ8ABZyUvKNM24 EGKT8lPBli5cuBA6derUe7FY7Ffj4+N/s3tdJY8PdwA/Qha1vyBztXjjQnwH+Ea5HeylI0eOtMzM zBwNBoPEYrGfT05OLpZzfaUPiKvAEPBdYB65OntjGhBCtAM/rKSDQvl8PnV6evrdkZGRd9fX1/+8 vr7+m1JTz16q9l8A2oDvA18D/pW1XSefQogfUMXxUXd3d8PExET/8PBwv2EYz1ZXV38ZDoeXKm2v WmBLXciIHwE+B54CL4C0EKKXMpepnZ2dnpMnT3aNjo6+EwqFOjc2Nj7a2Nj43cTExH+qddQpYEvN wLeQS9JeYAVYuHjx4sDTp0+VhYUFPRqNbiWTSUPTNNHR0aG1t7d7uru7m0KhkLevr+9Qf3+/PxAI eHVd/2xtbe2fuq7/dWpqKuGUg04D50sFgkAwEokMvHjx4qimaa2qqrYoitIAsLOzs2UYRiqTySQz mcxKOp1e0HX9k+3t7SeV5Kcd1RL4QOp/GtofUQrANYgAAAAASUVORK5CYII= "
|
||||||
|
height="60"
|
||||||
|
width="60" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 6.6 KiB |
BIN
Mobile/img/icons/icon32.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
Mobile/img/icons/icon48.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
Mobile/img/icons/icon60.png
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
Mobile/img/icons/icon64.png
Normal file
After Width: | Height: | Size: 4.0 KiB |
BIN
Mobile/img/icons/icon90.png
Normal file
After Width: | Height: | Size: 6.0 KiB |
191
Mobile/index.html
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
<!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>
|
||||||
|
<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>
|
||||||
|
<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'>
|
||||||
|
<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'>Changelog</a>
|
||||||
|
</span>
|
||||||
|
<button class='close'>x</button>
|
||||||
|
</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/main.js'></script>
|
||||||
|
<script src='js/mobile.js'></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
38
Mobile/js/main.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
window.c = $('canvas')[0].getContext('2d');
|
||||||
|
window.o = $('canvas')[1].getContext('2d');
|
||||||
|
|
||||||
|
window.settings = {
|
||||||
|
lineWidth : 2,
|
||||||
|
color : 'black',
|
||||||
|
type: 'sketch',
|
||||||
|
lineCap: 'round',
|
||||||
|
lineJoin: 'round',
|
||||||
|
furLength: 5,
|
||||||
|
connectTelorance: 40,
|
||||||
|
composite: 'source-over'
|
||||||
|
};
|
||||||
|
window.points = [];
|
||||||
|
window.$c = $('canvas');
|
||||||
|
window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}];
|
||||||
|
window.points.history.last = 0;
|
||||||
|
|
||||||
|
sizeAndPos();
|
||||||
|
//$(window).resize(sizeAndPos);
|
||||||
|
|
||||||
|
$('.color-picker').change(function() {
|
||||||
|
var c = $(this).find('.color').val();
|
||||||
|
settings.color = c;
|
||||||
|
$('#setcolor span').html(c);
|
||||||
|
})
|
||||||
|
$('.color').val('#000000');
|
||||||
|
|
||||||
|
/*yepnope({
|
||||||
|
test: window.mobile,
|
||||||
|
yep : ['js/libs/touch.js', 'js/mobile.js', 'js/libs/color-picker-touch.js'],
|
||||||
|
nope: ['js/desktop.js', 'js/libs/color-picker.js']
|
||||||
|
})*/
|
||||||
|
|
||||||
|
})
|
223
Mobile/js/mobile.js
Normal file
@ -0,0 +1,223 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
// Open External Links in browser
|
||||||
|
|
||||||
|
$('*').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
})
|
||||||
|
|
||||||
|
$('a[href^="http"]').on('tap', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var href = $(this).attr('href');
|
||||||
|
var view = new MozActivity({
|
||||||
|
name: 'view',
|
||||||
|
data: {
|
||||||
|
type: 'url',
|
||||||
|
url: href
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
function save() {
|
||||||
|
switch(save.background) {
|
||||||
|
case 'white': {
|
||||||
|
var cache = {
|
||||||
|
fillStyle: c.color,
|
||||||
|
composite: c.globalCompositeOperation
|
||||||
|
}
|
||||||
|
c.fillStyle = 'white';
|
||||||
|
c.globalCompositeOperation = 'destination-over';
|
||||||
|
c.fillRect(0, 0, width(), height());
|
||||||
|
c.fillStyle = cache.fillStyle;
|
||||||
|
c.globalCompositeOperation = cache.composite;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'current color': {
|
||||||
|
var cache = {
|
||||||
|
fillStyle: c.color,
|
||||||
|
composite: c.globalCompositeOperation
|
||||||
|
}
|
||||||
|
c.fillStyle = settings.strokeStyle;
|
||||||
|
c.globalCompositeOperation = 'destination-over';
|
||||||
|
c.fillRect(0, 0, width(), height());
|
||||||
|
c.fillStyle = cache.fillStyle;
|
||||||
|
c.globalCompositeOperation = cache.composite;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var data = $c[0].toDataURL();
|
||||||
|
var file = dataToBlob($c[0].toDataURL());
|
||||||
|
var pics = navigator.getDeviceStorage('pictures');
|
||||||
|
var r = pics.addNamed(file, save['file name'] + '.png');
|
||||||
|
r.onsuccess = function() {
|
||||||
|
alert('Your sketch was successfuly saved to ' + this.result);
|
||||||
|
}
|
||||||
|
r.onerror = function() {
|
||||||
|
alert('Something bad happened when we tried to save your file\n Possible problems: \n Duplicate name \n Permission problems')
|
||||||
|
console.warn(this.error);
|
||||||
|
}
|
||||||
|
c.putImageData(window.points.history[window.points.history.last].data, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.menu').tap(function() {
|
||||||
|
$('#menu').toggleClass('pulled');
|
||||||
|
})
|
||||||
|
$('.save').tap(function() {
|
||||||
|
$('#save').removeClass('hidden');
|
||||||
|
})
|
||||||
|
$c.last().on('touchstart', function(e) {
|
||||||
|
var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
|
||||||
|
startPoint(xy.x, xy.y);
|
||||||
|
window.active = true;
|
||||||
|
}).on('touchmove', function(e) {
|
||||||
|
if (!window.active || settings.type == 'line') return;
|
||||||
|
var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
|
||||||
|
drawPoint(xy.x, xy.y);
|
||||||
|
}).on('touchend', function(e) {
|
||||||
|
window.active = false;
|
||||||
|
if( settings.type == 'eraser' ) return;
|
||||||
|
|
||||||
|
if(window.points.history.last < window.points.history.length-1) {
|
||||||
|
window.points.history.splice(window.points.history.last+1);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.points.history.push({
|
||||||
|
data: c.getImageData(0, 0, width(), height()),
|
||||||
|
points: window.points.slice(0)
|
||||||
|
})
|
||||||
|
window.points.history.last = window.points.history.length-1;
|
||||||
|
}).on('longTap', function(e) {
|
||||||
|
if( points[points.length-1].type == 'line' ) {
|
||||||
|
window.active = false;
|
||||||
|
points[points.length-1].type = '';
|
||||||
|
points[points.length-1].start = undefined;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Value Selector
|
||||||
|
|
||||||
|
var $single = $('form[data-type="value-selector"].single');
|
||||||
|
|
||||||
|
$single.find('li').tap(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
|
||||||
|
$(this).attr('aria-selected', 'true');
|
||||||
|
var key = $(this).parents('form').attr('id'),
|
||||||
|
value = $(this).find('label span').html().toLowerCase();
|
||||||
|
window.settings[key] = value;
|
||||||
|
|
||||||
|
$('button[id="set' + key + '"] span').html(value[0].toUpperCase() + value.substr(1));
|
||||||
|
$('#menu div.options > div').addClass('hidden');
|
||||||
|
$('#menu div.options > .general, #menu div.options > .'+value).removeClass('hidden');
|
||||||
|
|
||||||
|
$(this).parents('form').addClass('hidden');
|
||||||
|
})
|
||||||
|
|
||||||
|
$single.find('button').tap(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$(this).parents('form').addClass('hidden');
|
||||||
|
})
|
||||||
|
|
||||||
|
// Confirm
|
||||||
|
|
||||||
|
var $confirm = $('form[data-type="value-selector"].confirm');
|
||||||
|
|
||||||
|
$confirm.find('li').tap(function(e) {
|
||||||
|
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
|
||||||
|
$(this).attr('aria-selected', 'true');
|
||||||
|
})
|
||||||
|
$confirm.find('button').last().tap(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var v = $(this).parents('form').attr('id');
|
||||||
|
$(this).parents('form').find('h1').each(function(i) {
|
||||||
|
if( i > 0 ) {
|
||||||
|
var key = $(this).html().toLowerCase();
|
||||||
|
var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html();
|
||||||
|
if( key !== 'file name' ) value = value.toLowerCase();
|
||||||
|
|
||||||
|
window[v][key] = value;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
$(this).parents('form').addClass('hidden');
|
||||||
|
window[v]();
|
||||||
|
})
|
||||||
|
$confirm.find('button').first().tap(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$(this).parents('form').addClass('hidden');
|
||||||
|
})
|
||||||
|
|
||||||
|
// Value Selector Callers
|
||||||
|
|
||||||
|
var $btn = $('button[id^="set"]');
|
||||||
|
$btn.each(function() {
|
||||||
|
var target = /set(.*)/.exec($(this).attr('id'))[1];
|
||||||
|
if( target == 'color' ) {
|
||||||
|
return $(this).tap(function() {
|
||||||
|
$('.picker').removeClass('hidden');
|
||||||
|
})
|
||||||
|
}
|
||||||
|
$(this).tap(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('form[id="' + target + '"]').removeClass('hidden');
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// Seekbar
|
||||||
|
|
||||||
|
var sliderLeft;
|
||||||
|
$('div[role="slider"] button').on('touchstart', function() {
|
||||||
|
$(this).attr('data-moving','true');
|
||||||
|
if( !sliderLeft ) sliderLeft = $('div[role="slider"] button').offset().left;
|
||||||
|
}).on('touchmove', function(e) {
|
||||||
|
if( $(this).attr('data-moving') ) {
|
||||||
|
var x = parseInt(e.changedTouches[0].pageX - sliderLeft - 15);
|
||||||
|
var $c = $('.'+$(this).parents('div[role="slider"]').attr('class'));
|
||||||
|
var progress = $c.find('progress');
|
||||||
|
var max = +progress.attr('max');
|
||||||
|
var min = +progress.attr('min');
|
||||||
|
if( x <= max && x >= min ) {
|
||||||
|
$c.find('button').css('left', x+'%');
|
||||||
|
progress.attr('value', x);
|
||||||
|
var key = $c.attr('class');
|
||||||
|
settings[key] = x;
|
||||||
|
$('#'+ key +' span').html(x);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).on('touchend', function() {
|
||||||
|
$(this).removeAttr('data-moving');
|
||||||
|
})
|
||||||
|
|
||||||
|
// Color Picker
|
||||||
|
|
||||||
|
$('.close').tap(function() {
|
||||||
|
$(this).parent().addClass('hidden');
|
||||||
|
})
|
||||||
|
|
||||||
|
// Bottom
|
||||||
|
|
||||||
|
$('#clear').tap(function() {
|
||||||
|
c.clearRect(0, 0, width(), height());
|
||||||
|
var h = window.points.history;
|
||||||
|
window.points = [];
|
||||||
|
window.points.history = h;
|
||||||
|
if(window.points.history.last < window.points.history.length-1) {
|
||||||
|
window.points.history.splice(window.points.history.last+1);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.points.history.push({
|
||||||
|
data: c.getImageData(0, 0, width(), height()),
|
||||||
|
points: []
|
||||||
|
})
|
||||||
|
window.points.history.last = window.points.history.length-1;
|
||||||
|
})
|
||||||
|
|
||||||
|
$('#undo').tap(undo);
|
||||||
|
$('#redo').tap(redo);
|
||||||
|
|
||||||
|
$('#about').tap(function() {
|
||||||
|
$('.about').removeClass('hidden');
|
||||||
|
})
|
||||||
|
|
||||||
|
});
|
20
Web/LICENSE
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2013 Mahdi Dibaiee
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||||
|
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||||
|
subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||||
|
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||||
|
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||||
|
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||||
|
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
4
Web/README.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
Brush
|
||||||
|
=====
|
||||||
|
|
||||||
|
An image manipulation tool written in Javascript
|
90
Web/css/color-picker.css
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
/* Purty Picker Copyright 2013 Jayden Seric (MIT license): https://github.com/jaydenseric/Purty-Picker */
|
||||||
|
/* Core: No touchy! */
|
||||||
|
.color-picker .spectrum {
|
||||||
|
position: relative;
|
||||||
|
/* To position pin, luminosity filter */
|
||||||
|
background: linear-gradient(gray, transparent), linear-gradient(90deg, red, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, yellow, #d4ff00, #aaff00, #80ff00, #55ff00, #2bff00, lime, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, cyan, #00d4ff, #00aaff, #007fff, #0055ff, #002bff, blue, #2a00ff, #5500ff, #7f00ff, #aa00ff, #d400ff, magenta, #ff00d4, #ff00aa, #ff0080, #ff0055, #ff002b, red);
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
/* Prevent pin interaction causing content selection */
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
.color-picker .spectrum.active {
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
.color-picker .spectrum.active .pin {
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
.color-picker .spectrum > div {
|
||||||
|
/* Luminosity filter */
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.color-picker .spectrum .pin {
|
||||||
|
position: absolute;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Customization: Default skin */
|
||||||
|
.color-picker {
|
||||||
|
margin: 20px;
|
||||||
|
padding: 11px;
|
||||||
|
border: 1px solid #e3e3e3;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
.color-picker .color,
|
||||||
|
.color-picker .luminosity {
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.color-picker .format {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 10px auto;
|
||||||
|
}
|
||||||
|
.color-picker .color {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 11px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.color-picker .color.dark {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
.color-picker .spectrum {
|
||||||
|
height: 150px;
|
||||||
|
/* Arbitary but required */
|
||||||
|
overflow: hidden;
|
||||||
|
/* Prevent pin overflowing container */
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.color-picker .spectrum > div {
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.color-picker .spectrum .pin {
|
||||||
|
margin-left: -4px;
|
||||||
|
margin-top: -4px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
border: 2px solid white;
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
.color-picker .luminosity {
|
||||||
|
margin: 0;
|
||||||
|
}
|
16
Web/css/fonts.less
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'MozTT-Regular';
|
||||||
|
src: url('fonts/MozTT-Regular.ttf');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'MozTT-Light';
|
||||||
|
src: url('fonts/MozTT-Light.ttf');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'MozTT-Medium';
|
||||||
|
src: url('fonts/MozTT-Medium.ttf');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'MozTT-Bold';
|
||||||
|
src: url('fonts/MozTT-Bold.ttf');
|
||||||
|
}
|
BIN
Web/css/fonts/MozTT-Bold.ttf
Normal file
BIN
Web/css/fonts/MozTT-Light.ttf
Normal file
BIN
Web/css/fonts/MozTT-Medium.ttf
Normal file
BIN
Web/css/fonts/MozTT-Regular.ttf
Normal file
BIN
Web/css/imgs/bg_overlay_pressed_1.png
Normal file
After Width: | Height: | Size: 93 B |
BIN
Web/css/imgs/bg_overlay_pressed_2.png
Normal file
After Width: | Height: | Size: 94 B |
BIN
Web/css/imgs/clear.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
Web/css/imgs/div_line_lg_black.png
Normal file
After Width: | Height: | Size: 1.0 KiB |
BIN
Web/css/imgs/div_line_sm_black.png
Normal file
After Width: | Height: | Size: 1.0 KiB |
BIN
Web/css/imgs/download.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
Web/css/imgs/header_bg_black.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
Web/css/imgs/menu.png
Normal file
After Width: | Height: | Size: 182 B |
BIN
Web/css/imgs/redo.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
Web/css/imgs/settings.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
Web/css/imgs/undo.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
266
Web/css/main.less
Normal file
@ -0,0 +1,266 @@
|
|||||||
|
@import 'fonts';
|
||||||
|
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-moz-focus-inner {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
*:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
visibility: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#container {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
display: block;
|
||||||
|
height: 4.8rem;
|
||||||
|
width: 0.1rem;
|
||||||
|
&.long {
|
||||||
|
background: url('imgs/div_line_lg_black.png');
|
||||||
|
}
|
||||||
|
&.small {
|
||||||
|
background: url('imgs/div_line_sm_black.png');
|
||||||
|
}
|
||||||
|
&.left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
&.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
&.menu {
|
||||||
|
position: relative;
|
||||||
|
left: -3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
z-index: 9999;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 5.3rem;;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
-moz-appearance: none;
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
display: block;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0 0 0.2rem 0.2rem;
|
||||||
|
font-size: 10pt;
|
||||||
|
border: 1px solid rgb(227, 227, 227);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
top: -2%;
|
||||||
|
left: 97%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker, .about {
|
||||||
|
font-family: 'MozTT-Light';
|
||||||
|
width: 30rem;
|
||||||
|
height: 24.6rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -12.3rem;
|
||||||
|
margin-left: -15rem;
|
||||||
|
|
||||||
|
.color-picker {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
background: #262626;
|
||||||
|
padding: 1rem 2rem;;
|
||||||
|
height: 23rem;
|
||||||
|
margin-top: -11.5rem;
|
||||||
|
margin-left: -17rem;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 0 0.3rem black;
|
||||||
|
|
||||||
|
a, a:link, a:visited, a:active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
background: #262626;
|
||||||
|
color: white;
|
||||||
|
border: 1px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 11pt;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-size: 8pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
width: 100%;
|
||||||
|
height: 5.3rem;
|
||||||
|
background: url('imgs/header_bg_black.png');
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
background: url('imgs/menu.png') -12px center no-repeat;
|
||||||
|
float: left;
|
||||||
|
&:active {
|
||||||
|
background: url('imgs/menu.png') -12px center no-repeat, url('imgs/bg_overlay_pressed_1.png') left no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save {
|
||||||
|
background: url('imgs/download.png') center center no-repeat;
|
||||||
|
float: right;
|
||||||
|
&:active {
|
||||||
|
background: url('imgs/download.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
color: white;
|
||||||
|
font-size: 11pt;
|
||||||
|
font-family: 'MozTT-Regular';
|
||||||
|
float: left;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
position: relative;
|
||||||
|
left: -2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#menu {
|
||||||
|
height: 100%;
|
||||||
|
width: 15rem;
|
||||||
|
background: #262626;
|
||||||
|
position: absolute;
|
||||||
|
left: -15rem;
|
||||||
|
top: 5rem;
|
||||||
|
color: white;
|
||||||
|
font-family: 'MozTT-Light';
|
||||||
|
font-size: 8pt;
|
||||||
|
transition: left 0.2s ease-out;
|
||||||
|
border-collapse: collapse;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.pulled {
|
||||||
|
left: 0;
|
||||||
|
transition: left 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[id^='set'], p, .bottom button {
|
||||||
|
background: none;
|
||||||
|
display: block;
|
||||||
|
width: 75%;
|
||||||
|
color: white;
|
||||||
|
text-align: left;
|
||||||
|
margin: 1rem 2.5rem;
|
||||||
|
font-family: 'MozTT-Light';
|
||||||
|
font-size: 8pt;
|
||||||
|
padding: 0 0.6rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
float: right;
|
||||||
|
font-size: 7pt;
|
||||||
|
}
|
||||||
|
div[role='slider'] {
|
||||||
|
width: 60%;
|
||||||
|
float: right;
|
||||||
|
margin: 0 2rem 0 0;
|
||||||
|
|
||||||
|
div {
|
||||||
|
overflow: visible;
|
||||||
|
button {
|
||||||
|
margin-top: -3.4rem;
|
||||||
|
left: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
clear: both;
|
||||||
|
padding: 0.7rem 0;
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
*[class^='icon'] {
|
||||||
|
display: block;
|
||||||
|
margin: 1rem 0.5rem;
|
||||||
|
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
background-size: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin: -0.3rem 0.5rem 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-settings:before {
|
||||||
|
background-image: url('imgs/settings.png');
|
||||||
|
}
|
||||||
|
.icon-clear:before {
|
||||||
|
background-image: url('imgs/clear.png');
|
||||||
|
}
|
||||||
|
.icon-undo:before {
|
||||||
|
background-image: url('imgs/undo.png');
|
||||||
|
}
|
||||||
|
.icon-redo:before {
|
||||||
|
background-image: url('imgs/redo.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
display: block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5rem;
|
||||||
|
width: 100%;
|
||||||
|
button[class^='icon'] {
|
||||||
|
margin-left: 3.5rem;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
margin-left: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
80
Web/css/seekbars.css
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
/* ----------------------------------
|
||||||
|
* Seekbars
|
||||||
|
* ---------------------------------- */
|
||||||
|
div[role="slider"] {
|
||||||
|
position: relative;
|
||||||
|
height: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="slider"] > div {
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
overflow-y: hidden;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="slider"] progress {
|
||||||
|
width: 100%;
|
||||||
|
background: #000;
|
||||||
|
border: none;
|
||||||
|
height: 0.1rem;
|
||||||
|
display: block;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-top: 1.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="slider"] progress::-moz-progress-bar {
|
||||||
|
background: #01c5ed;
|
||||||
|
height: 0.6rem;
|
||||||
|
margin-top: -0.3rem;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="slider"] > label {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 3.8rem;
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: #00aacb;
|
||||||
|
float: right;
|
||||||
|
padding: 0 0 0 1rem;
|
||||||
|
height: 3.5rem;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="slider"] label:first-of-type {
|
||||||
|
float: left;
|
||||||
|
padding: 0 1rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="slider"] > label.icon {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
font-size: 0;
|
||||||
|
background: no-repeat right top / 3rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="slider"] > label.icon:first-of-type {
|
||||||
|
background-position: top left;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="slider"] button {
|
||||||
|
width: 3.2rem;
|
||||||
|
height: 3.2rem;
|
||||||
|
background: url(seekbars/images/ui/handler.png) no-repeat center center / 3rem auto;
|
||||||
|
font: 0/0 a;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
margin: -1.5rem 0 0 -1.6rem;
|
||||||
|
border-radius: 3.2rem;
|
||||||
|
border: solid 0.1rem transparent;
|
||||||
|
transition: border 0.15s ease;
|
||||||
|
padding: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[role="slider"] button:active {
|
||||||
|
border: solid 0.5rem #01c5ed;
|
||||||
|
}
|