repl.it
@heyitsmarcus/

SketchMeh

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • css
  • img
  • js
  • script.js
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="My online project portfolio by Marcus Parsons at marcusparsons.com">
    <meta name="author" content="Marcus Parsons">
    <meta name="keywords" content="marcus,parsons,web,website,development,design,javascript,html,css,html5,css3,jquery">
	<title>SketchMeh</title>
	<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
    <noscript>
        <h1 style="text-align: center; margin-top: 10%; font-size: 4em;">This application requires that JavaScript be enabled in order to run. Please contact your administrator or visit <a href="http://enable-javascript.com/" target="_blank">Enable-Javascript.com</a> to see how to enable JavaScript in your browser.</h1>
    </noscript>
    <div id="container"></div>
	<div id="controls">
		<ul>
		</ul>
        <div id="optionsHolder">
		  <button id="saveSketch">Save Sketch</button><button id="clearSketch">Clear Sketch</button><button id="revealColorSelect">Toggle Add Color</button>
            <select id="toolBelt">
                <option>Tool Type:</option><option selected value="pen">Pen</option><option value="line">Line</option><option value="textOutline">Text (Outline)</option><option value="textFill">Text (Fill)</option><option value="dropper">Dropper</option><option value="eraser">Eraser</option><option value="spray">Spray Paint</option><option value="rectOutline">Rectangle (Outline)</option><option value="rectFill">Rectangle (Fill)</option><option value="circleOutline">Circle (Outline)</option><option value="circleFill">Circle (Fill)</option><option value="starOutline">Star (Outline)</option><option value="starFill">Star (Fill)</option>
            </select>
            <select id="toolSize">
                <option>Tool Size:</option>
                <option selected value="1">1 (12px)</option>
                <option value="2">2 (14px)</option>
                <option value="3">3 (16px)</option>
                <option value="4">4 (18px)</option>
                <option value="5">5 (20px)</option>
                <option value="6">6 (22px)</option>
                <option value="7">7 (24px)</option>
                <option value="8">8 (26px)</option>
                <option value="9">9 (28px)</option>
                <option value="10">10 (30px)</option>
                <option value="11">11 (32px)</option>
                <option value="12">12 (34px)</option>
                <option value="13">13 (36px)</option>
                <option value="14">14 (38px)</option>
                <option value="15">15 (40px)</option>
                <option value="16">16 (42px)</option>
                <option value="17">17 (44px)</option>
                <option value="18">18 (46px)</option>
                <option value="19">19 (48px)</option>
                <option value="20">20 (50px)</option>
            </select>
            <button id="helpButton">Help</button>
        </div>
		<div id="colorSelect">
			<span id="newColor"></span>
			<div id="sliders">
                <p>RGB Color Slider</p>
				<p>
					<label for="red">Red</label>
					<input id="red" type="range" min="0" max="255" value="0"> <output for="red">0</output>
				</p>
				<p>
					<label for="green">Green</label>
					<input id="green" type="range" min="0" max="255" value="0"> <output for="green">0</output>
				</p>
				<p>
					<label for="blue">Blue</label>
					<input id="blue" type="range" min="0" max="255" value="0"> <output for="blue">0</output>
				</p>
                <p>
                    <label for="alphac">Opacity</label>
                    <input id="alphac" type="range" min="0" max="100" value="100"> <output for="alphac">100</output>
                </p>
                <div id="curcolorContainer">
                    <span>Current color:</span>
                    <div>RGBA: <span id="curcolorRGBA" class="copytext"></span></div>
                    <div>Hex: <span id="curcolorHEX" class="copytext"></span></div>
                    <div>KML: <span id="curcolorKML" class="copytext"></span></div>
                </div>
			</div>
			<div>
			<button id="addNewColor">Add Color</button>
			</div>
		</div>
	</div>
    <div id="helpContent">
        <button id="helpContentX">X</button>
        <h1>Help Meh!</h1>
        <div id="helpInnerContent">
            <p>Sketch Meh has support for both <span class="colem">Undo</span> and <span class="colem">Redo</span>.  Use the keyboard combination of Ctrl + Z, at the same time, for an <span class="colem">undo</span> action to undo the last drawing you did.  A single drawing counts as pressing the mouse down on the sketching area for any amount of time and then letting it go when finished (or having your mouse leave the sketching area).  If you accidentally got rid of something important by undoing it, you can do a <span class="colem">redo</span> action by pressing Ctrl + Y.  You can <span class="colem">undo</span> and <span class="colem">redo</span> as many times as you need to.</p>
            <p>Pressing the <span class="colem">Clear Sketch</span> button not only clears the sketch area of all drawings, but it also clears all <span class="colem">undo</span> and <span class="colem">redo</span> history.</p>
            <p>You can use <span class="colem">Save Sketch</span> to save your sketch as an image, or you can simply right click on the sketching area and select "Save image as" at any time to also save your sketch as an image.  The image file format is always ".png".</p>
            <p>Use the <span class="colem">Toggle Add Color</span> button to show or hide the custom color panel, which uses the RGB (Red, Green, and Blue) color model.  Drag the sliders for red, green, and blue to make any custom color you wish.  When you're finished, click <span class="colem">Add Color</span> and the color will be added to the end of the color swatch below the sketching area, and it will be automatically selected for you.  You can tell when a color is selected, because it will have a white border around it, with the exception of the color white which will have a black border. If you'd like to learn how to make colors using RGB, <a href="http://www.rapidtables.com/web/color/RGB_Color.htm" target="_blank">check out this link</a>. If you'd like to learn more about the science behind the RGB color model, <a href="https://www.rgbworld.com/color.html" target="_blank">check out this link</a>.</p>
            <p>You can choose what tool you'd like to use with the sketching area by clicking on the box that says <span class="colem">Pen</span>.  Any shape will have either "Outline" or "Fill" beside of it.  "Outline" is used to create a shape with the color you've chosen as an outline; the rest of the shape will not be filled in.  "Fill" is used to create a shape that is filled with the color you've chosen.</p>
            <p>To the right of the tool picker is what size your chosen tool will be.  Each selection has a number and a pixel value beside it i.e. <span class="colem">1 (12px)</span>.  The 1 is the thinnest line and 20 is the thickest line.  The pixel value beside each number represents the font size that the text will be if you choose either "Text (Outline)" or "Text (Fill)".</p>
            <p>Thanks for using my program, and I hope you enjoy it! ^_^</p>
        </div>
    </div>
    <input type="text" id="textInput" />
	<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
		if (!window.jQuery){
		//load fallback jQuery script for IE <9 if jQuery 2.x not successfully loaded
		document.write('<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"><\/script>');
		}
	</script>
	<script src="js/app.js" type="text/javascript"></script>	
	</body>
</html>
result
console
?