-
Notifications
You must be signed in to change notification settings - Fork 0
/
MEME-MAKER.html
51 lines (51 loc) · 2.36 KB
/
MEME-MAKER.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MEME MAKER</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="color-options">
<div class="color-inner">
<div class="select-color">
<input type="color" id="color">
</div>
<div class="select">Select More Color!</div>
<div class="color-option" style="background-color: #c56cf0;" data-color="#c56cf0"></div>
<div class="color-option" style="background-color: #ffb8b8;" data-color="#ffb8b8"></div>
<div class="color-option" style="background-color: #ff3838;" data-color="#ff3838"></div>
<div class="color-option" style="background-color: #ff9f1a;" data-color="#ff9f1a"></div>
<div class="color-option" style="background-color: #fff200;" data-color="#fff200"></div>
<div class="color-option" style="background-color: #32ff7e;" data-color="#32ff7e"></div>
<div class="color-option" style="background-color: #7efff5;" data-color="#7efff5"></div>
<div class="color-option" style="background-color: #18dcff;" data-color="#18dcff"></div>
<div class="color-option" style="background-color: #7d5fff;" data-color="#7d5fff"></div>
<div class="color-option" style="background-color: #4b4b4b;" data-color="#4b4b4b"></div>
</div>
</div>
<div class="canvas">
<canvas></canvas>
</div>
<div class="options">
<div class="slide">▶</div>
<div class="option-box">
<div class="option-box-inner">
<span class="pencil">Pencil Width</span>
<input id="line-width" type="range" min="1" max="10" value="5" step="0.1"/>
<button id="mode-btn">Fill</button>
<button id="clear-btn">Clear All</button>
<button id="eraser-btn">Erase</button>
<label for="file">
Add Photo
<input type="file" accept="image/*" id="file"/>
</label>
<input type="text" placeholder="Write Stamp Text" id="text"/>
<span class="how-stamp">< Text Stamp ><br>Double click in Canvas!</span>
<button id="save">Save image</button>
</div>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>