-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (82 loc) · 4.65 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
<!doctype html>
<!--[if IE]>
<p>Your browser is out of date, and may not be compatible with our website. A list of the most popular web browsers can be found below. Just click on the links to get to the download page <a href="https://www.google.com/chrome/" target="_blank">Chrome</a>, <a href="https://support.apple.com/downloads/safari" target="_blank">Safari</a>, <a href="http://www.opera.com/download/" target="_blank">Opera</a></p>
<style type="text/css">div, #board {display: none;}</style>
<![endif]-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pixel Art Maker!</title>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="icon.png">
</head>
<body>
<header class="header">
<div class="container">
<section class="header-title">
<h1 class="logo-title">8-bit Art</h1>
<h3 class="logo-subtitle">create your own pixel image</h3>
<hr class="border-bottom">
<hr class="border-bottom">
</section>
<section class="header-subtitle">
<h2 class="canvas-title">Design canvas</h2>
<div class="actions">
<a href="https://raw.githubusercontent.com/pathliving/8-bit/master/examples/8-bit.gif" class="btn demo">demo</a>
<button class="btn js-settings btn-border" value="settings">settings</button>
</div>
</section>
</div>
</header>
<!-- Board -->
<aside>
<section id="board" class="board visible-brd">
<button class="btn js-close btn-border">x</button>
<h5 class="choose-title">1.Choose grid size</h5>
<button class="btn btn-margin btn-border js-small" value="small">small</button>
<button class="btn btn-margin btn-border js-medium" value="medium">medium</button>
<button class="btn btn-margin btn-border js-large" value="large">large</button>
<button class="btn btn-margin btn-border js-custom" value="custom">custom</button>
<form id="sizePicker" class="size-picker">
<h6 class="picker-title">Height:</h6>
<input type="number" id="inputHeight" class="picker-height" name="height" min="1" value="50" max="100">
<h6 class="picker-title">Width:</h6>
<input type="number" id="inputWidth" class="picker-width" name="width" min="1" value="50" max="100">
<button class="btn create btn-margin btn-border btn-shadow" type="submit" value="create">create</button>
</form>
<h5>2.Pick a color</h5>
<button class="color color-border white" onclick="document.getElementById('colorPicker').jscolor.fromString('ffffff')"></button>
<button class="color color-border black" onclick="document.getElementById('colorPicker').jscolor.fromString('000000')"></button>
<button class="color color-border yellow" onclick="document.getElementById('colorPicker').jscolor.fromString('fff018')"></button>
<button class="color color-border red" onclick="document.getElementById('colorPicker').jscolor.fromString('ff0000')"></button>
<button class="color color-border green" onclick="document.getElementById('colorPicker').jscolor.fromString('11b617')"></button>
<h6 class="custom-title">or</h6><br>
<h6 class="custom-title">set custom color:</h6>
<div class="color-picker"><input class="jscolor color-border" style="width:50px; height:20px;" id="colorPicker" value="21B0FF"></div>
<h5 class="drawing-title">3.Let's drawing!</h5>
<button class="btn js-reset btn-margin btn-border" value="reset">reset</button>
<button class="btn js-toggle-grid btn-margin btn-border" value="toggle grid">toggle grid</button>
<button class="btn js-save btn-margin btn-border" value="save">save</button>
</section>
</aside>
<!-- Canvas/Grid -->
<main>
<div class="container">
<h3 class="notice">Please rotate your device to landscape orientation</h3>
<table id="pixelCanvas" class="canvas"></table>
</div>
</main>
<!-- Disable content for IE
<noscript>
<p>Your browser is out of date, and may not be compatible with our website. A list of the most popular web browsers can be found below. Just click on the links to get to the download page <a href="https://www.google.com/chrome/" target="_blank">Chrome</a>, <a href="https://support.apple.com/downloads/safari" target="_blank">Safari</a>, <a href="http://www.opera.com/download/" target="_blank">Opera</a></p>
<style type="text/css">div, #board {display: none;}</style>
</noscript>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jscolor.js"></script>
<script src="main.js"></script>
</body>
</html>