-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
119 lines (94 loc) · 3.87 KB
/
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
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title>Pixlr - Pixel Art Maker</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="css/pixlr.css">
</head>
<body>
<div class="fluid pixlr-header">
<div class="container">
<div class="row">
<img class="logo" src="images/pixlr-w.svg">
</div>
</div>
</div>
<div class="fluid pixlr-main">
<div class="container">
<div class="row">
<div class="pixlr-controls">
<p class="title">Pixlr Settings</p>
<div class="row color-picker-container">
<input type="color" id="color_picker">
</div>
<div class="row">
<label>
Red <input type="range" min="0" max="255" value="0" class="slider" id="pixlr_red"
oninput="pixlr.colors.slider.update()">
</label>
<label>
Green <input type="range" min="0" max="255" value="0" class="slider" id="pixlr_green"
oninput="pixlr.colors.slider.update()">
</label>
<label>
Blue <input type="range" min="0" max="255" value="0" class="slider" id="pixlr_blue"
oninput="pixlr.colors.slider.update()">
</label>
<label>
Grid Height:
<input type="number" id="input_height" name="height" min="1" max="20" value="20">
</label>
<label>
Grid Width:
<input type="number" id="input_width" name="width" min="1" max="20" value="20">
</label>
<label for="canvas_bg">Background Color: <br>
<input type="color" id="canvas_bg" value="#f1f1f1" onchange="pixlr.grid.background.change()">
</label>
<button id="clear_background" class="btn btn-primary" onclick="pixlr.grid.transparent()">Clear
Background
</button>
<button id="save_pixels" class="btn btn-primary pixel-canvas--save-pixels"
onclick="pixlr.pixels.save()">Save Pixel
</button>
<button type="submit" class="btn btn-success pixel-canvas--create-grid" onclick="pixlr.makeGrid()">
Create New Grid
</button>
</div>
</div>
<div class="pixlr-grid brush-mode">
<table id="pixel_canvas"></table>
</div>
<div class="pixlr-sidebar">
<div class="row">
<p class="section-title">Message Console</p>
<p id="pixlr_console"></p>
</div>
<div class="row">
<p class="section-title">Color History</p>
<table id="color_history">
<tr></tr>
</table>
</div>
<div class="row">
<p class="section-title">Pixel Preview</p>
<div id="saved_pixel"></div>
</div>
</div>
</div>
</div>
</div>
<footer class="fluid">
<div class="container">
<div class="row">
<p>
Created by <a href="http://lloanalas.com">Lloan Alas</a>. Pixlr source on <a
href="https://github.com/lloan/gwg-fend/tree/master/pixel-art-maker">GitHub</a>.
</p>
</div>
</div>
</footer>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="js/pixlr.js"></script>
</body>
</html>